web-dev-qa-db-ja.com

現在の月から過去の日付と翌月の日付を削除する

フルカレンダーから過去の日付と翌月の日付を削除することはできますか？したがって、現在の月については、現在の日付と曜日のみを表示する必要があります。

jqueryfullcalendar
20
rubyist

EventRender（）メソッドでイベントをスキップしてみてください。

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

翌月と前月のグリッドセルには「fc-other-month」というクラスがあるため、そのようにターゲットに設定できます。

例：非表示の日番号、CSSを追加：

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

またはこのJavaScriptを実行します。

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

これを試して！

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

これは私にとってはうまくいきます！

6
Mohamed Alikhan

この設定を追加しますshowNonCurrentDates: false。この設定では、当月に属さない日付やイベントは表示されません。

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

この回答で提供されているソリューションはいずれも、現在のバージョンの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;
    }
}
4
ZettaGeek
$('.fc-other-month').html('');

他の月を無効にする場合：

$(".fc-other-month").addClass('fc-state-disabled');
1
mudassar031
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; 
    }
}
1
Nishikant

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; } },

1
Ryan Barkley

WeekModeを使用してみてください： http://fullcalendar.io/docs/display/weekMode/ 。

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

それが役に立てば幸い

1
Roberto Flores

バージョン2.0以降の場合：

eventRender: function (event, element, view) {
   if(event.start._d.getMonth() !== $('calendar').fullCalendar('getDate')._d.getMonth()) { 
      return false; 
    }
}

// if you want to remove other month's days from view add to css:
    .fcc-other-month { 
        visibility:hidden;
     }
1
jettpleyn

私が使用した最新バージョンの場合：

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'}
        });
    }
}
0
Jeff Shain

イベントレンダリングとコールバック関数を使用すると、私の問題が解決しました。現在のビューから前月と翌月のイベントを完全に非表示にします。

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;
        }

それが役に立てば幸い

0
Varun Sreedharan

これはバージョン3.6.1で機能しています

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

テキストの色を背景色、つまり白に変更して非表示にすることができます

td.fc-other-month {
        color: white;
    }

しかし、バージョンが3以上の場合は、parameter- showNonCurrentDays：false を確認できますが、これは月表示用です。

0
Dip

フルカレンダーバージョン-4のソリューションを以下で確認しました。これは機能し、前月と翌月の日を非表示にし、イベントURLで前月/翌月の日付を渡しません。

showNonCurrentDates: false

この質問をしていただきありがとうございます。

0
Kamlesh

このclientOptions'showNonCurrentDates' => false, and 'fixedWeekCount' => false,を試すことができます

このコードを使用すると、前の月と次の月の日を非表示にできますが、thouse日のセルは残ります。 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

0
Mahesh Kathiriya

このトリックを使用して、年ビューの現在の月から過去の日付と翌月の日付のイベントを削除します。

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();

                            });
                        },
0
Manish Vadher