web-dev-qa-db-ja.com

fullcalendarで過去の日付を選択不可にする方法

問題は、fullcalendarの月/週ビューで過去の日付で選択可能を無効にする方法です。

過去の日付をクリック/選択することをユーザーに許可しないようにします。

enter image description here

ここに、イベントレンダリングで実装しようとしているgoogledコードスニペットを示します：

selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
        var appdate = jQuery.datepicker.formatDate('<?php echo $DPFormat; ?>', new Date(start));
        jQuery('#appdate').val(appdate);
        jQuery('#AppFirstModal').show();
    },
    eventRender: function(event, element, view)
    {
        var view = 'month' ;
       if(event.start.getMonth() !== view.start.getMonth()) { return false; }
    },

しかし、それは動作しません。

私もCSSを試してみましたが、これは過去の日付のテキストのみを非表示にするのに役立ちますが、selectableはまだ過去の日付ボックスで動作しています。

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

私は本当にこの問題にこだわっています。誰か助けてください。ありがとう...

jquerydatefullcalendar
24
Frank

これをフルカレンダーで実行しましたが、完全に機能しています。

このコードを選択関数に追加できます。

 select: function(start, end, allDay) {
    var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
    if(check < today)
    {
        // Previous Day. show message if you want otherwise do nothing.
        // So it will be unselectable
    }
    else
    {
        // Its a right date
        // Do something
    }
  },

それがあなたのお役に立てば幸いです。

32
Mausami

私はこのアプローチが好きです：

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

基本的に、「今」より前の時間の選択を無効にします。

メソッドの選択解除

25
Michal Gallovic

この回答 のおかげで、以下の解決策が見つかりました：

$('#full-calendar').fullCalendar({
    selectable: true,
    selectConstraint: {
        start: $.fullCalendar.moment().subtract(1, 'days'),
        end: $.fullCalendar.moment().startOf('month').add(1, 'month')
    }
});
9
dap.tci

FullCalendar v3.0には、プロパティ selectAllow があります。

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}
4
David Chen

以下を組み合わせることができます。

-質問で言及されているようにCSSによってテキストを非表示にする

- 今月のPREVボタンを無効にする

-dayClick/eventDropなどの日付を確認します。

dayClick: function(date, allDay, jsEvent, view) {
    var now = new Date();
    if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){
        alert('test');
    }
    else{
         //do something
    }
}
4
Lukasz Koziara

私はこのアプローチを試しましたが、うまくいきます。

$('#calendar').fullCalendar({
   defaultView: 'month',
   selectable: true,
   selectAllow: function(select) {
      return moment().diff(select.start) <= 0
   }
})

楽しい！

3
Novasol

以下は私が現在使用しているソリューションです：

        select: function(start, end, jsEvent, view) {
            if (moment().diff(start, 'days') > 0) {
                $('#calendar').fullCalendar('unselect');
                // or display some sort of alert
                return false;
            }
1
david

長いプログラムは必要ありません。これを試してください。

checkout.setMinSelectableDate(Calendar.getInstance().getTime());    
Calendar.getInstance().getTime()

現在の日付を提供します。

1
Akila Jayasinghe

validRangeオプションを使用しています。

validRange: { start: Date.now(), end: Date.now() + (7776000) // sets end dynamically to 90 days after now (86400*90) }

1
Deniz Kaplan
*You can use this*

var start_date= $.fullCalendar.formatDate(start,'YYYY-MM-DD');

 var today_date = moment().format('YYYY-MM-DD');

 if(check < today)

 {    alert("Back date event not allowed ");   
 $('#calendar').fullCalendar('unselect');    return false

 }
1
P P

これは私が現在使用しているものです

また、ユーザーが同じ時間にイベントを追加できないように.add（）関数を追加しました

select: function(start, end, jsEvent, view) {
               if(end.isBefore(moment().add(1,'hour').format())) {
               $('#calendar').fullCalendar('unselect');
               return false;
             }
1
André Fernandes

Fullcalendar 3.9では、 validRange function parameter ：

validRange: function(nowDate){
    return {start: nowDate} //to prevent anterior dates
},

欠点：これは、その日時より前のイベントも非表示にします

1
nicolallias

Fullcalendarでは、dayClickイベントで達成しました。簡単な方法だと思いました。

これが私のコードです。

 dayClick: function (date, cell) {
              var current_date = moment().format('YYYY-MM-DD')
              // date.format() returns selected date from fullcalendar
              if(current_date <= date.format()) {
                //your code
              }
            }

過去と未来の日付が選択できなくなることを願っています。

0
Parthiban.S

答えのいずれかがあなたのためにうまくいかない場合、これを試してみてくださいあなたのためにその仕事を願っています。

 select: function(start, end, allDay) {                

              var check = formatDate(start.startStr);
              var today = formatDate(new Date());

              if(check < today)
              {
                 console.log('past');                     
              }
              else
              {                    
                console.log('future');
              }
}

また、以下のように日付形式の関数を作成します

function formatDate(date) {
      var d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
  }

上記の質問をすべて試してみましたが、うまくいきません

他の回答が機能する場合は、これを試すことができます。

ありがとう

0
dev_ramiz_1707