web-dev-qa-db-ja.com

フルカレンダーで特定の日付以降の日付をブロックする方法

現在の日付から常に30日先の未来の日付があります。これは、Dateオブジェクトに格納されます。私はこれを使ってこれを解決しました：

var currentDate = new Date();
var futureBlockDate = new Date();
futureBlockDate.setDate(currentDate.getDate() + 30);

FullCalendar jQueryプラグインの使用 カレンダーでこの日付を過ぎた日を別の背景色で視覚的にブロックして、ユーザーができないことをユーザーに知らせたいそれらをクリックするか、それらの日にイベントを作成します。

FullCalendarでこれを行うための最良の方法は何ですか？デフォルトですべての日付を無効にし、特定の範囲（今日の日付から将来の30日まで）のみを有効にする可能性がありますか？

次のコードを使用して、無効な背景状態をすべてのセルに適用できると思います。

$(".fc-widget-content").addClass("disabled");

.disabled .fc-day-content {
    background-color: #123959;
    color: #FFFFFF;
    cursor: default;
}

どうすればできますか？

javascriptjquerydatefullcalendar
11
user unknown

dayRender オプションを使用して、「無効な」クラスを範囲外の日付に追加します。

$('#calendar').fullCalendar({
    ...
    dayRender: function(date, cell){
        if (date > maxDate){
            $(cell).addClass('disabled');
        }
    }
    ...
});

viewRender イベントと gotoDate メソッドを使用して、ユーザーが今日から30日以上移動しないようにすることもできます。

$('#calendar').fullCalendar({
    ...
    viewRender: function(view){
        if (view.start > maxDate){
            $('#calendar').fullCalendar('gotoDate', maxDate);
        }
    }
    ...
});
24
LeGEC

このソリューションはどうですか？

dayClick: function(date, allDay, jsEvent, view) {
   var myDate = new Date();

   //How many days to add from today?
   var daysToAdd = 15;

   myDate.setDate(myDate.getDate() + daysToAdd);

   if (date < myDate) {
       //TRUE Clicked date smaller than today + daysToadd
       alert("You cannot book on this day!");
   } else {
       //FLASE Clicked date larger than today + daysToadd
       alert("Excellent choice! We can book today..");
   }

}
6
dezman

これは今月の期間を選びました

<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?>
$('#calendar').fullCalendar({
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            defaultDate: moment(),
            editable: false,
            //height:'auto',
            //weekends: false,
            defaultView: 'agendaWeek', 
            eventLimit: true, 

            events: {
                url: 'php/get-events.php',
                error: function() {
                    $('#script-warning').show();
                }

            },
            loading: function(bool) {
                $('#loading').toggle(bool);

            },
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth()); 
            end.setDate(<?php echo $numerodias; ?>);
            now.setDate(1);
            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
                alert(end);
            }
            else {
                $("#calendar .fc-next-button").show();
            }

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

min-display-dateおよびmax-display-dateを定義するためのソリューションを探している人のために：（フルカレンダーv2の場合）

$('#calendar').fullCalendar({
    defaultDate: new Date(),
    viewRender: function(view, element) {

        curdate = new Date();
        viewdate = new Date(view.start);

        // PREV - force minimum display month to current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <= 
            new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){
            $('.fc-prev-button').prop('disabled', true);
            $('.fc-prev-button').css('opacity', 0.5);
        } else {
            $('.fc-prev-button').prop('disabled', false);
            $('.fc-prev-button').css('opacity', 1);
        }

        // NEXT - force max display month to a year from current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >= 
            new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){
            $('.fc-next-button').prop('disabled', true);
            $('.fc-next-button').css('opacity', 0.5);
        } else {
            $('.fc-next-button').prop('disabled', false);
            $('.fc-next-button').css('opacity', 1);
        }
    }
});
1
CIRCLE

クリック時にセルを無効にする場合（バージョン2.0）：

dayRender: function( date, cell ) {
     // It's an example, do your own test here
    if(cell.hasClass("fc-other-month")) {
          cell.addClass('disabled');
     } 

},
dayClick: function(date, jsEvent, view) {
    if($(jsEvent.target).hasClass("disabled")){
        return false;
    }
    // Your code
    // ....
}
0
altore

このコードをFullcalendarに追加するだけです。

select: function (start, end, jsEvent, view) {
            if (start.isBefore(moment())) {
                $('#calendar').fullCalendar('unselect');
                return false;
            }
            else {

                 var currentDate = moment(start).format('YYYY/MM/DD'));
                 alert(currentDate);
            } 
        }

シンプルで高速。楽しい！

0
Wajid khan