Question

在FullCalendar中默认显示当前月份，日期和年份，但我想要自定义喜欢2013年6月5日。

如何做到这一点

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();


    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: false,
        events: [
            {
                title: 'Movie In',
                start: new Date(y, m, d),
                end: new Date(y, m,d),
                allDay: true,
            },

            ],
        eventColor: '#E42217'
    });

});

in

var d ='5'; var m ='7'; var y ='2013';

我已经过了自定义日期月份但没有工作

谢谢

Answer 1

我认为这就是你想要的：gotoDate

Answer 2

如果您的意思是列标题，请使用columnFormat，如下所示：

$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,
    events: [
        {
            title: 'Movie In',
            start: new Date(y, m, d),
            end: new Date(y, m,d),
            allDay: true,
        },

        ],
    eventColor: '#E42217',
    columnFormat: {
                  month: 'ddd',    // Mon
                  week: 'ddd M/d', // Mon 9/7
                  day: 'dd MMM yyyy' 
                  }
});

如果您想去特定日期，请使用此方法。

$('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )

初始化日历后，请调用此方法。

Answer 3

$(document).ready(function() {
    $('#calendar').fullCalendar({
        defaultDate:$.now(),
            // lang: 'ja',
            editable: true,
            eventLimit: true,
            customButtons: {
                btnJan: {
                    text: 'January',
                    click: function() {
                        var moment = $('#calendar').fullCalendar('getDate');
                        var currentMonth =  moment.format('YYYY')+'-'+01+'-'+01;
                        $('#calendar').fullCalendar('gotoDate', currentMonth);
                    }
                },
                btnFeb: {
                    text: 'February',
                    click: function() {
                        var moment = $('#calendar').fullCalendar('getDate');
                        var currentMonth =  moment.format('YYYY')+'-'+02+'-'+01;
                        $('#calendar').fullCalendar('gotoDate', currentMonth);
                    }
                }
            },
            header: {
                left: 'prev,next today btnJan btnFeb',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayNamesShort: ['Sunday', 'Monday', 'Tuesday', 'Wednesday','Thursday', 'Friday', 'Saturday'],
            monthNames:['January', 'February', 'March', 'April', 'May', 'June', 'July','August', 'September', 'October', 'November', 'December'],
            titleFormat:'MMMM D YYYY',
            events: [
                {
                    title: 'All Day Event',
                    start: '2016-06-01'
                }
            ]
        });
});

参考： https://fullcalendar.io/docs/current_date/getDate/
演示 http://www.somelesson.blogspot.com/2016/11/fullcalendar-javascript-event-calendar.html
的输出：

如何使FullCalendar仅显示选择月份和日期

3 个答案: