个人中心
gpt4 book ai didi

javascript - fullcalendar - 将 'prev,next today' 按钮的位置更改为自定义选择器？

转载 作者：行者123 更新时间：2023-12-03 03:00:34 27 4
gpt4 key购买 nike

我正在尝试将 fullcalendar 的(下一个，上一个今天)按钮的位置更改为特定的选择器。这可能吗？

我曾尝试使用 javascript append 到 selector，但按钮的操作停止工作。

这是我的 html 代码:

<div id="header"></div>

    <div class="panel panel-default booking-panel">
        <div class="panel-heading " style="text-align: center;"> 
            <span class="left" style="float:left; text-transform: uppercase; font-weight: bold;">test </span> 
            <span id="title" style=" text-transform: uppercase; font-weight: bold;"> Employee </span> 
        </div>

        <div id="calendar"></div>

    </div>

我需要将三个按钮放置在 .left 选择器中，如图所示>> enter image description here

UPDATE

测试.php 

require_once 'calendar/config.php';
require_once 'calendar/functions.php';
$events = get_events();
$events = get_json($events);



if(!empty($_POST['clickDate'])){
print_r($_POST);
die;
}

?>
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>First</title>

    <link href="datatable/css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style/style.css" type="text/css">

    <!--  Portrait phones and smaller -->
    <link rel="stylesheet" media="screen and (max-width: 480px)" href="style/1_portrait_phones_and_smaller-style.css" />

    <!--  Landscape phones and portrait tablets -->
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="style/2_landscape_phones_and_portrait-style.css" />

    <!-- Portrait tablets and small desktops -->
    <link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 991px)" href="style/3_portrait_tablets_and_small_desktops-style.css" />

    <!-- Landscape tablets and medium desktops -->
    <link rel="stylesheet" media="screen and (min-width: 992px) and (max-width: 1199px)" href="style/4_landscape_tablets_and_medium_desktops-style.css" />

    <!-- Large desktops and laptops --> 
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="style/5_large_desktops_and_laptops-style.css" />



    <!-- Calendar -->
    <link href="calendar/DateTimePicker/dist/DateTimePicker.css" rel="stylesheet">
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="calendar/bootstrap/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="calendar/css/jquery-ui.css">
    <link rel="stylesheet" href="calendar/fc/fullcalendar.css">
    <link rel="stylesheet" href="calendar/fc/fullcalendar.print.css" media="print">
    <link rel="stylesheet" href="calendar/css/style.css">
    <script src="calendar/js/jquery-ui.min.js"></script>

</head>
<body>
    <script>
$(document).ready(function(){

$("#header").load("include/header.php"); 

$("#next").click(function() {
  $('#calendar').fullCalendar("next");
});

$("#prev").click(function() {
  $('#calendar').fullCalendar("prev");
});

  $("#today").click(function() {
  $('#calendar').fullCalendar("today");
});
});
    </script>


    <div id="header"></div>


    <button type="button" id="prev">
&lt;
</button>
<button type="button" id="next">
&gt;
</button>
<button type="button" id="today">
Today
</button>
        <div id="calendar"></div>


<script>var events = <?php echo $events ?>;</script>
<script src="calendar/fc/lib/moment.min.js"></script>
<script src="calendar/fc/fullcalendar.js"></script>
<!--<script src="fc/lang.ar.js"></script>-->
<script src="calendar/js/main.js"></script>
</body>

ma​​in.js

        $(document).ready(function() {    
        $("#calendar").fullCalendar({
        eventClick: function( event, jsEvent, view ) { 
            $(this).css('background-color', 'red');
        },

        dayClick: function(date, jsEvent, view) {
            //var clickDate = date.format();
            //$('#start').val(clickDate);
            //$('#dialog').dialog('open');
            // change the day's background color just for fun
            $(this).css('background-color', 'red');

            /*$.ajax({
                url: 'index.php',
                type: 'POST',
                data: {clickDate: clickDate},
                success: function(res){
                    console.log(res);
                },
                error: function(){
                    alert("ERROR!");
                }
            });*/

        },

        header: {
            left: 'prev,next today',
            right: 'month,agendaWeek,agendaDay,listDay'
        },
        viewRender: function(view) {
            var title = view.title;
            $("#externalTitle").html(title);
        },
        slotDuration : '00:05:00',
        //editable: true, //Drag and Drop
        theme: true,
        eventSources: [
            {
                events : events,
                color : '#0EB6A2',
                textColor: '#fff'
            }
        ],

        //monthNames: ['كانون الثاني', 'شباط'],
        //monthNamesShort: ['ك ث', 'ش'],
        //dayNames: ['سبت', 'أحد'],
        //dayNamesShort: ['س', 'أ'],
        /*events: [
            {
                title: "Event 1",
                start: "2017-11-19"
            },
            {
                title: "Event 2",
                start: "2017-11-24"
            },
            {
                title: "Event 3",
                start: "2017-12-19"
            },
        ],*/

        /*eventSources: [
            'file.json'
        ]*/
    });

    $('#dialog').dialog({
        autoOpen: false,
        show: {
            effect: 'drop',
            duration: 500
        },
        hide: {
            effect: 'clip',
            duration: 500
        }
    });

    $('#open').click(function(){
        $('#dialog').dialog('open');
    });

});

最佳答案

据我所知，您无法将标准按钮移动到页面中的其他位置。

但是你可以:

1) 通过设置“header”选项隐藏标准按钮，使其不显示，例如:

header: {
  left: '', //note no "buttons
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
},

参见https://fullcalendar.io/docs/display/header/

2) 制作自己的按钮，单击时仅调用 fullCalendar 的“下一个”、“上一个”和“今天”方法，例如:

<button type="button" id="prev">
&lt;
</button>
<button type="button" id="next">
&gt;
</button>
<button type="button" id="today">
Today
</button>

$("#next").click(function() {
  $("#calendar").fullCalendar("next");
});

$("#prev").click(function() {
  $("#calendar").fullCalendar("prev");
});

$("#today").click(function() {
  $("#calendar").fullCalendar("today");
});

参见https://fullcalendar.io/docs/current_date/next/ , https://fullcalendar.io/docs/current_date/prev/和 https://fullcalendar.io/docs/current_date/today/

您可以将这些按钮放置在页面中的任何位置。

参见http://jsfiddle.net/z8Lpvmyj/1/进行工作演示。

关于javascript - fullcalendar - 将 'prev,next today' 按钮的位置更改为自定义选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47410221/

27 4 0
文章推荐： javascript - Firebase URL 缩短器与 jQuery Ajax Post？
文章推荐： javascript - 如何通过从对象获取来循环将消息添加到字符串中？
文章推荐： javascript - 如何为关闭按钮设置cookie
文章推荐： javascript - 单击 Angular 4 中的按钮时动态添加输入
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com