3

ArshawのFullCalendarに次の方法があるかどうか疑問に思いました。1-カレンダーを週末の表示から週末の表示なしに、またはその逆に変更します。2-タイムスロット間隔をたとえば30分から60分に動的に変更します。

言い換えれば、私がやろうとしていることは次のとおりです。

//Clicking the button that shows Saturday and Sunday too
    $('#weekend-yes').click(function(){
        $('#weekend-yes').hide();
        $('#weekend-no').fadeIn();
            //HYPOTHETICALLY  DO THIS
        $('#calendar').fullCalendar('option', 'weekends', true/false);
    });

そのようなことが不可能な場合、最善の回避策は何でしょうか？最初のカレンダーのレプリカである2番目のカレンダーを作成できると思いますが、それでは複製が多すぎます。

私が得ることができるどんな助けにも感謝します。

4

7 に答える 7

4

これを試して：

$('#values').click(function(){
    var weekend = $('#calendar').fullCalendar('option', 'weekends');
    if (weekend){
        $('#values').text('Show weekend');
        $('.fc-header').remove();
        $('.fc-content').remove();
        $('#calendar').fullCalendar({ firstDay:1, height:650, 
                                           weekMode:'liquid', weekends:false, 
                                           header: {left: 'prev,next today', 
                                                    center: 'title',
                                                    right: 'month,
                                                    agendaWeek,agendaDay'}});
    } else {
        $('#values').text('Hide weekend');
        $('.fc-header').remove();
        $('.fc-content').remove();
        $('#calendar').fullCalendar({ firstDay:1, height:650, 
                               weekMode:'liquid', weekends:true, 
                               header: {left: 'prev,next today',
                                        center: 'title',
                                         right: 'month,agendaWeek,agendaDay'}});
    };
});
于 2012-10-09T10:19:08.723 に答える
2

このプラグインの作成者によると、すべてのFullCalendarオプションにはセッターがありません（残念ながらweekendsそれらの1つです）。だから私はあなたがいくつかのオプションを持っていると思います

  1. 週末をtrue/falseに設定してカレンダーを再初期化（破棄および初期化）
  2. プラグインのソースを編集して、このオプションのセッターを追加します。この周りに問題が記録されているのを見てきましたが、このプラグインはもう積極的に開発されていないと思います。

ではごきげんよう！

于 2012-08-14T20:51:44.677 に答える
2

古いトピックですが、fullCalendar（2＆3）の現在の実装ではまだ解決されていません。fullCalendarには「changeView」機能があります。ビューをカスタマイズする必要があります。これを行うには、既存の1つを拡張します。

$('#calendar').fullCalendar({
views: {
    workWeek: {
        type: 'agendaWeek',
        hiddenDays: [0, 6]
    }
}});

現在、必要なときにいつでもビューを変更できます。

$('#calendar').fullCalendar( 'changeView', 'workWeek' )

また

$('#calendar').fullCalendar( 'changeView', 'agendaWeek' )
于 2016-11-01T22:35:42.060 に答える
2

2017年の更新： FullCalendarは2.9.0（7-10-2016）に週末セッターを追加したため、カレンダーの破棄やカスタムビューの操作は不要になりました。

FullCalendar3.1.0を使用して本番アプリに週末の切り替えを実装した方法は次のとおりです。

var calendarOptions = {
  ...
  customButtons: {
    toggleWeekends: {
      text: 'Show Weekends',
      click: function() {
        toggleWeekends();
      },
    },
  },
  ...
  header: {
    left: 'today toggleWeekends',
    ...
  },
  weekends: false,
}

function toggleWeekends() {
  var weekends = $('#calendar').fullCalendar('option', 'weekends');
  var text = 'Show Weekends';

  if (weekends == false) {
    text = 'Hide Weekends';
  }

  $('#calendar').fullCalendar('option', {
    customButtons: {
      toggleWeekends: {
        text: text,
        click: function() {
          toggleWeekends();
        },
      },
    },
    weekends: !weekends,
  });
}
于 2017-07-26T03:25:25.973 に答える
1

私はグーグルでこれに出くわし、まだ言及されていないオプションを追加すると思いました。暦日にはすべて、名前が付いたcssクラスがあり、ターゲットを簡単に設定できます。

$(document).ready(function(){
   $('#toggleOff').on('click', function(){
       $('.fc-sat').hide();
       $('.fc-sun').hide();
   });

   $('#toggleOn').on('click', function(){
       $('.fc-sat').show();
       $('.fc-sun').show();
   });
});
于 2014-06-20T14:23:55.363 に答える
1

以下のコードスニペットがお役に立てば幸いです（私はfullcalendar.jsバージョン2を使用しています）

var calendarInitiate = function(noWeekend){
$("#calendar").fullCalendar('destroy');
$("#calendar").fullCalendar({weekends:noWeekend, events: [{ ...enter events list here... }]});
}
calendarInitiate(true); //True initially to show weekends

$("#showWeekends").click(function(){ calendarInitiate(true); //This will show weekends });
$("#hideWeekends").click(function(){ calendarInitiate(false); //This will hide weekends });
于 2014-09-04T00:00:23.017 に答える
0

週末を切り替える場合：

  1. カスタムビューを作成する
  2. カスタムビューのプロパティで週末をfalseに設定します
  3. カスタムビューの名前をヘッダーに追加して、このビューのボタンが表示されるようにします。
  4. defaultViewを使用して、初期ビューを設定します
$('#calendar').fullCalendar({
    //defaultView: 'agendaWeekdays',
    header: {
        right: 'month,monthWeekdays,agendaWeek,agendaWeekdays'
    },
    views: {
        agendaWeekdays: {
            buttonText: 'Weekdays',
            type: 'agendaWeek',
            weekends: false
        },
        monthWeekdays: {
            buttonText: 'Month (Weekdays)',
            type: 'month',
            weekends: false
        }
    }
});

スロット期間については、カレンダーを破棄し、 slotDurationプロパティを変更して再度作成することができます。

または、slotDurationsがそれぞれ異なるカスタムビューをさらに作成することもできます。これらのビューのボタンをヘッダーに追加する必要はありませんが、代わりに、カスタムビューを呼び出すスロット期間用の独自のUIを作成します。

$('#calendar').fullCalendar('changeView', 'agendaWeekdaysSlotDuration15');
于 2017-02-03T20:27:53.337 に答える