jquery - Fullcalendar は利用可能な月の表示を制限しますか?

Question

日付ピッカー内のように、フルカレンダーを制限して 3 か月の期間を表示し、残りの月を選択解除する方法を知りたいですか?

たとえば、現在の月は 2010 年 5 月です。カレンダーに 5 月と 4 月 (前の月をクリックした場合) と 6 月 (翌月をクリックした場合) のみを表示したい場合、残りの月はユーザーの選択から選択解除されます。

fullcalendar ドキュメントの一部を読み逃したかどうかはわかりません。親切なアドバイス。ありがとうございました。

Answer 1

バージョン 2 の FullCalendar の場合viewDisplay : function(view) {( viewRender: function(view,element) { このページの例からの混合ソリューション):

  $('#calendar').fullCalendar({

       //restricting available dates to 2 moths in future
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth() + 2); //Adjust as needed

            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-next-button").show();
            }

            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
  });

Answer 2

これはtaurenのanswerに基づいていますが、それを実現するために必要な日付計算とフルカレンダー セレクターが含まれています (このコードでは 12 か月の範囲を使用しています)。

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 11); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();

      if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 3

私はこれを行っていないので、これが機能するかどうかはわかりません。しかし、少なくとも試してみることはできます。

おそらく、コールバックのカスタマイズを検討するでしょうviewDisplay。プロパティなどを含むビュー オブジェクトを受け取ります。startView オブジェクトのプロパティを使用して、ユーザーが見ているビューと日付をテストし、それに基づいてアクションを実行できます。

fullcalendar がこのように機能するかどうかはわかりませんがreturn false、コールバックからの場合、一部のプラグインはアクションを中止します。そのため、日付を確認し、start許容可能な月の範囲外の場合はreturn false、アクションを中止できます。

それでもうまくいかない場合は、内部で日付viewDisplayを再度確認できstartます。翌月または前月が範囲外の場合は、jQuery セレクターを使用して、前/次のボタンを取得して無効にすることができます。そうすれば、ユーザーは範囲外の月に切り替えることができなくなります。

また、ユーザーが範囲外の月にいる場合は、すぐにgotoDateコマンドを発行して有効な月に切り替えることができます。

$('#calendar').fullCalendar({
    viewDisplay: function(view) {
        // maybe return false aborts action? 
        if (view.start > lastDayOfNextMonth) {
            return false;
        }
        // or disable next button if this is last valid month
        if (view.end + oneDay >= lastValidDate) {
            $("#calendar #fc-button-next").attr("disabled","disabled");
        }
        // or gotoDate if view.start is out of range
        if (view.start > lastValidDate) {
           // gotoDate
        }
    }
});

そこにロジックと日付計算を行う方法はたくさんありますが、この方法で何かを機能させることができると思います。

Answer 4

            var academicYearStartDate = new Date('2013/4/10');
            var academicYearEndDate = new Date('2014/4/10');

            viewDisplay: function (view) {
                //========= Hide Next/ Prev Buttons based on academic year date range
                if (view.end > academicYearEndDate) {
                    $("#SchoolCalender .fc-button-next").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-next").show();
                }

                if (view.start < academicYearStartDate) {
                    $("#SchoolCalender .fc-button-prev").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-prev").show();
                }

            }

Answer 5

私は同様の状況に直面していました: イベントのプログラムがあり、Fullcalendar をイベントの日付範囲 (たとえば、12 週間) に制限したいと考えていました。したがって、今日が第 6 週の場合、ユーザーが [次へ] または [前へ] をクリックすると、カレンダーには第 1 週から第 12 週までの日付のみが表示されます。fullcalendar.js の変更を検討しましたが、プロジェクトのタイムラインから迂回してそうする時間がありません。ここでの回避策として、私がしたことは次のとおりです。

1. ページの左側の div に日付ピッカーを追加し、右側に fullCalendar を追加します。
2. プログラムの日付範囲の startDate と endDate を設定します。
3. datepicker のプログラム日付範囲の startDate と endDate を使用して、datepicker で minDate と maxDate 変数を設定し、範囲外の他のすべての日付をグレー表示します。これの目的は、範囲内にとどまるようにユーザーに示唆することです。また、ユーザーが datepicker で日付をクリックすると、その日が fullCalendar に表示されるように、いくつかのコードを追加しました。

4. カスタム jQuery ファイル .js で、変数として日付を取る dayClickの fullCalendar メソッドに追加します。

   if (+date < +jQuery.startDate || +date > jQuery.endDate) {

   var $date_out_of_range_dialog = jQuery('') .html('

   申し訳ありませんが、選択した日付は現在のプログラムの日付範囲外です。

   開始日: '+ (jQuery.startDate.getMonth() + 1) + '/' +jQuery.startDate.getDate() + '/' +jQuery.startDate.getFullYear() +'

   終了日: ' + (jQuery.endDate.getMonth() + 1) + '/' +jQuery.endDate.getDate() + '/' +jQuery.endDate.getFullYear() + '

   ') .dialog({ autoOpen: false, modal: true, title: 'Date Out of Range', width: 600, buttons: { "Ok": function() { jQuery(this).dialog("close"); } } })

   $date_out_of_range_dialog.dialog('open');

   } そうしないと {

   //範囲内のその日のイベントの表示/追加/削除などの何かを行います。

   }

5. ダイアログ ウィンドウを開く .dialog メソッドは mootools のものですが、jQuery でも同様の方法を使用できます。jQuery を先頭に追加しました。私の.jsファイルを通してvarsが利用できるように、startDateとendDateに。

6. 以下は、datepicker が日付を選択して fullCalendar で選択するためのコードです。

   jQuery('#datepicker_for_calendar').datepicker({ defaultDate: jQuery.startDate, minDate: jQuery.startDate, maxDate: jQuery.endDate, inline: true, showButtonPanel: true, onSelect: function(dateText, inst) { var d = new Date(dateText); jQuery('#calendar').fullCalendar('gotoDate', d); selectedDate = d; } });