Question

我试图将next,prev today的{fullcalendar）按钮的位置更改为特定的selector。这可能吗？

我曾尝试使用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选择器中，因为它在此图片中显示＆gt;＆gt;

更新

test.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>

main.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');
    });

});

Answer 1

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

但你可以：

1）通过设置“标题”选项隐藏标准按钮，使其不显示，例如：

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

请参阅https://fullcalendar.io/docs/display/header/

2）制作你自己的按钮，点击时只需调用fullCalendar的“next”，“previous”和“today”方法，例如：

<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/进行工作演示。

fullcalendar - 改变＆＃39; prev的地方，今天下一个＆＃39;按钮到自定义选择器？

1 个答案: