fullCalendar

今、学校時間割カレンダーと言うカレンダーを作っています。
（カレンダーの日付をクリックしたら時間割設定画面に飛び、その曜日の時間割を設定する）

現在、カレンダーを表示して日付をクリックしたら別リンクに飛ぶ様にしました。

そこで、カレンダーの日付をクリックしたら、その曜日の時間割設定画面（月曜日だったら月曜日の時間割設定画面）に飛たいと思っているのですが、どのようにすればいいのでしょうか？

<div id="calendar"></div> <script type="text/javascript"> <!--

        $(document).ready(function () {

            $('#calendar').fullCalendar({



                //ヘッダーの書式
                columnFormat: {
                    month: 'ddd', // 月
                    week: 'D[(]ddd[)]', // 7(月)
                    day: 'D[(]ddd[)]' // 7(月)

                },
                // タイトルの書式
                titleFormat: {
                    month: 'YYYY年 M月', // 2014年9月
                    week: 'YYYY年 M月 D日',
                    day: 'YYYY年 M月 D日[(]ddd[)]', // 2014年9月7日(火)
                },
                //more表示の書式
                dayPopoverFormat: 'YYYY年 M月 D日[(]ddd[)]',
                // 月名称
                monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                // 月略称
                monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                // 曜日略称
                dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
                // スロットの時間の書式
                axisFormat: 'H:mm',

// 時間の書式
timeFormat: 'H:mm',
// ボタン文字列
buttonText: {
// prev: '前',
// next: '次',
prevYear: '前年',
nextYear: '翌年',
today: '今日',
month: '月',
week: '週',
day: '日'

},

dayClick: function(date, jsEvent, view) {

location.href = "http://www.yahoo.co.jp/";
}

            });

        });

-->

行動規範の内容に同意します

回答2件

各時間割について、日曜日なら"http://example.jp/week/0"、月曜日なら"http://example.jp/week/1"、以下、土曜日の"http://example.jp/week/6"というようなURLでアクセスできるように用意しておきます。前半は何でもいいですが、最後は0〜6の数字にするのがコツです。あとは、以下のような感じでdayClickを書きます。

JavaScript
1dayClick: function(date, jsEvent, view) {
2  var urlPrefix = "http://example.jp/week/";
3  location.href = urlPrefix + data.day(); 
4}

dateはMomentのオブジェクトなので、date.day()は週をあらわす数字が返ります。数字は日曜日の0からはじまり、土曜日が6です。
参考: Moment.js | Docs #Day of Week
なので、それをそのままURLとしてくっつけて、対応するページを用意すればいけるかと思います。

投稿2015/10/22 09:34

raccy

総合スコア21735

dayClickを下記のように書き換えると、クリックした日付の時間割表示になります。

dayClick: function(date, jsEvent, view){
    $("#calendar").fullCalendar( 'gotoDate', date );
    $("#calendar").fullCalendar( 'changeView', "agendaDay" );
},

「曜日」というViewはないと思いますので、月・週・日の各表示で「曜日」に対してどういう操作をしたいのか仕様を決めて対応方法を考えるのが良いと思います。

投稿2015/10/21 18:45