删除当前月份的过去日期和下个月日期

时间:2011-10-02 17:34:39

标签: jquery fullcalendar

是否可以从完整日历中删除过去的日期和下个月的日期?因此,对于当前月份,它应仅显示当前日期和日期。

19 个答案:

答案 0 :(得分:15)

您可以尝试在eventRender()方法中跳过事件:

eventRender: function(event, element, view)
{
   if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}

答案 1 :(得分:8)

下个月和上个月的网格单元格具有“fc-other-month”类,因此您可以通过这种方式定位它们:

例如为: 隐藏日期数字, 添加CSS:

.fc-other-month .fc-day-number { display:none;}

或运行此JavaScript:

$(".fc-other-month .fc-day-number").hide()

答案 2 :(得分:6)

试试这个!

$('.fc-other-month').html('');

这对我有用!

答案 3 :(得分:5)

添加此设置showNonCurrentDates: false。使用此设置,将不会显示不属于当前月份的日期和事件。

$('#calendarId').fullCalendar({
     // Other settings
     showNonCurrentDates: false            
});

答案 4 :(得分:4)

此答案中提供的所有解决方案均未正确解决当前版本的FullCalendar问题。以Bascht的答案为出发点,我已经更新了他使用当前FullCalendar API的方法。下面是完成此任务的工作示例代码:

eventRender: function (event, element) {
    var eventDate = event.start;
    var calendarDate = $('#activitiesCalendar').fullCalendar('getDate');
    if (eventDate.get('month') !== calendarDate.get('month')) {
        return false;
    }
}

答案 5 :(得分:1)

eventRender: function (event, element, view) {
    var currentMon = new Date(event.start);
    var currentMonth = currentMon.getMonth();

    var currentMonViewStart = new Date(view.start);
    var currentMonthViewStart = currentMon.getMonth();

    var currentMonViewEnd = new Date(view.end);
    var currentMonthViewEnd = currentMonViewEnd.getMonth();

    if((currentMonth == currentMonthViewStart) && (currentMonth  == currentMonthViewEnd)){ 
        return false; 
    }
}

答案 6 :(得分:1)

版本2.0或更高版本:

String w1 = "memakai";

String w2 = "pakai";

答案 7 :(得分:1)

尝试使用weekMode:http://fullcalendar.io/docs/display/weekMode/

weekMode: 'liquid', or `weekMode: 'variable',`

希望有所帮助

答案 8 :(得分:1)

对于较新版本的FullCalendar插件,以下工作使用Moment.js帮助函数:

eventRender: function(event, element, view){ var evStart = moment(view.intervalStart).subtract(1, 'days'); var evEnd = moment(view.intervalEnd).subtract(1, 'days'); if (!event.start.isAfter(evStart) || event.start.isAfter(evEnd)) { return false; } },

答案 9 :(得分:1)

$('.fc-other-month').html('');

并禁用其他月份:

$(".fc-other-month").addClass('fc-state-disabled');

答案 10 :(得分:0)

如何使用模态窗口v2.2.6在此代码中的实际月份视图中隐藏其他月份的日期?

2020-12-16T01:51:17.066065200Z -> 5249122821198048556

答案 11 :(得分:0)

对于完整日历v5.0,在完整日历js中添加以下行:

showNonCurrentDates: false

在CSS下方添加到您的页面:

.fc-day-disabled {
    visibility:hidden;
}

答案 12 :(得分:0)

完整日历版本4 中选中了以下解决方案。它可以正常工作,隐藏上个月和下个月的日期,并且在事件URL中也不会超过上个月/下个月的日期。

showNonCurrentDates: false

感谢您提出这个问题。

答案 13 :(得分:0)

您可以将文本的颜色更改为背景色,即白色,这样它将不可见

this.animals = ...

但是您的版本是> = 3,那么您可以检查参数-showNonCurrentDays : false,但这是用于月份视图。

答案 14 :(得分:0)

使用此技巧从年份视图中的当前月份删除过去日期和下个月日期事件。

eventAfterAllRender: function() {
                            $(".fc-other-month").each(function() {
                                var index=$(this).index();
                                var aa= $(this).closest("table").find("tbody").find("tr").
                                find("td:nth-child("+(index+1)+")");
                                aa.find(".fc-day-grid-event").hide();

                            });
                        },

答案 15 :(得分:0)

您可以尝试此clientOptions 'showNonCurrentDates' => false, and 'fixedWeekCount' => false,

此代码允许我隐藏前几个月和下个月的日子,但是thouse days的细胞仍然存在: 尝试使用Fullcalendar Doc

<?= $JSCode = <<<EOF
function(event, element, view) {

if(event.nonstandard.status =='0'){
 element.find(".fc-title").css({"color": "red"});   
 $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "red", "color": "white"});                   
} else if(event.nonstandard.status == '1'){
   element.find(".fc-title").css({"color": "#1ab394"});                      
  $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "#1ab394", "color": "white"});                     
}else if(event.nonstandard.status == '4' || event.nonstandard.status == '5'){
   $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "#676a6c", "color": "white"});                                          
}else if(event.nonstandard.status == '3'){
 element.find(".fc-title").css({"color": "red"}); 
 $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "red", "color": "white"});                        
}else if(event.nonstandard.status == '2'){
    element.find(".fc-title").css({"color": "orange"}); 
 $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "orange", "color": "white"});                        
}                           

if(event.nonstandard.working_hours) { 
    var new_description =  '<strong>Total' + '    : </strong>' + event.nonstandard.working_hours + '<br/>';
    element.append(new_description);  
} } EOF;


        yii2fullcalendar\yii2fullcalendar::widget([
            'id' => 'calendar',
            'options' => [
                'lang' => 'en',
                'header' => [
                    'left' => 'prev,next today',
                    'center' => 'title',
                    'right' => 'month,agendaWeek,agendaDay'
                ],
            ],
            'clientOptions' => [
                'height' => 750,
                'showNonCurrentDates' => false,
                'language' => 'en',
                'eventLimit' => true,
                'selectable' => true,
                'selectHelper' => true,
                'droppable' => false,
                'editable' => false,
                'fixedWeekCount' => false,
                'defaultDate' => date('Y-m-d'),
                'eventRender' => new JsExpression($JSCode),
            ],
            'events' => Url::to(['/user/myattr/jsoncalendar'])
        ]);
        ?>

full calendar custom view

答案 16 :(得分:0)

这对我来说是3.6.1版

 eventRender: function(event, element, view)
 {
     if(!event.start.isBetween(view.intervalStart, view.intervalEnd)) { return false; }
 }

答案 17 :(得分:0)

使用事件渲染和回调函数解决了我的问题。完美隐藏当前视图中的上个月和下个月的事件

eventRender: function(event, element, view) {
                        if (view.name == "month") {
                            if (event.start._i.split("-")[1] != getMonthFromString(view.title.split(" ")[0])) {
                                return false;
                            }
                        }
                    }

function getMonthFromString(mon) {
            var d = Date.parse(mon + "1, 2016");
            if (!isNaN(d))
                return new Date(d).getMonth() + 1;
            return -1;
        }

希望有所帮助

答案 18 :(得分:0)

对于我使用的最新版本:

eventRender: function(event,element,view) {
    var view_title = view.title;
    var event_title = event.start;
    var event_title2 = moment(event_title).format('MMMM YYYY');
    if(event_title2 !== view_title) { 
        return false; 
    } else {
        var idname = 'event' + event.id;
        $(element).attr('id', idname).addClass('ttLT').attr('title', event.title);
        var mytitle = event.title;                              
        if (mytitle.toLowerCase().indexOf("open timeslot") >= 0)
        {
            $(element).addClass('alert').addClass('alert-success');
        }
        else{
            $(element).addClass('alert').addClass('alert-info');
            $(element).find('.fc-event-title').addClass('capitalize');
            $(element).find('.fc-event-inner').addClass('capitalize');                                                                                                                              
        }                                               
        element.qtip({
            content: event.description,
            style:{classes:'qtip-bootstrap'},
            position:{my:'bottom right',at:'top left'}
        });
    }
}