如何在fullcalendar中查看上个月和下个月的可点击日期?

时间:2014-10-21 09:41:06

标签: javascript fullcalendar

在Fullcalendar中,我想要无法点击或取消选择当月的日期。 例如,这些天可能是最后一个月或下个月的天数。谁可以告诉我如何使其无法点击或取消选择? (当用户点击发生的那些日子时)

我试过了:

.fc-other-month  {visibility: hidden;}

但它只是隐藏了它们......

这是我的代码:

var d = new Date();

var calendar = $('#calendar').fullCalendar({
    eventSources: [{
        url: 'show_records.php',
        color: 'green',
    }],
    events: [{
            "title": "Capodanno",
            "start": d.getFullYear()+"-01-01"
        },{
            "title": "Epifania",
            "start": d.getFullYear()+"-01-06"
        },{
            "title": "Festa Liberazione",
            "start": d.getFullYear()+"-04-25"
        },{
            "title": "Festa Lavoratori",
            "start": d.getFullYear()+"-05-01"
        },{
            "title": "Festa Repubblicstarta",
            "start": d.getFullYear()+"-06-02"
        },{
            "title": "SS Pietro e Paulo",
            "start": d.getFullYear()+"-06-29"
        },{
            "title": "Ferragosto",
            "start": d.getFullYear()+"-08-15"
        },{
            "title": "Santi",
            "start": d.getFullYear()+"-11-01"
        },{
            "title": "Immacolata",
            "start": d.getFullYear()+"-12-08"
        },{
            "title": "Natale",
            "start": d.getFullYear()+"-12-25"
        },{
            "title": "S.Stefano",
            "start": d.getFullYear()+"-12-28"
    }],

    eventColor: 'red',
    // Header of calander  
    header: {
        left: 'prev',
        center: 'title',
        right: 'next',
    },
    defaultView: 'month',
    // Italian languge 
    lang: 'it',
    // Saiz 
    height: 600,
    dayClick: function(date, jsEvent, view) {
        // Changing BG color
        $(this).css('background-color', 'green');
        //Create modal here
        $('#myModal').modal();
        // Show Date in SPAN
        $('#spnDate').html(date.format('DD-MM-YYYY'));
        // Put Date value in a variable 
        $('#date').attr('value', date.format('DD-MM-YYYY'));
    },
    editable: true,
});

2 个答案:

答案 0 :(得分:2)

您可以检查点击它的日期是否在当前活动月份,您可以通过在回调中添加简单验证来实现此目的:

var view = $('#calendar').fullCalendar( 'getView' );

return date.month() == view.intervalStart.month();

示例:

dayClick: function( date, jsEvent, view ) { 
      if date.month() !=  view.intervalStart.month() {
          //do nothing..
      }
}

回调通常将您点击的日期或事件和视图作为参数。

有关观看的信息:http://fullcalendar.io/docs/views/View_Object/ 或者:http://fullcalendar.io/docs/

答案 1 :(得分:0)

这有点难看,但不是将其可见性设置为隐藏,而是可以为它们指定背景颜色,然后检查元素是否在您的日期中具有该背景颜色并且不执行任何操作。