2017-02-15 2 views
1

は、私はあなたが見ることができるように表示されますが、(私のColdFusion .cfcという経由)カレンダーに私のカレンダーにGoogleの米国の休日を追加するには?

<html> 

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" /> 
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script> 
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script> 
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script> 
<script src="../fullcalendar-3.1.0/gcal.js"></script> 
<script> 
$(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     var calendar = $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      selectable: true, 
      selectHelper: true, 
      select: function(start, end, allDay) { 
       var title = prompt('Event Title:'); 
       if (title) { 
        calendar.fullCalendar('renderEvent', 
         { 
          title: title, 
          start: start, 
          end: end, 
          allDay: allDay 
         }, 
         true // make the event "stick" 
        ); 
       } 
       calendar.fullCalendar('unselect'); 
      }, 
      editable: true, 
      googleCalendarApiKey:'my_api_key', 
      url: 'https://www.googleapis.com/calendar/v3/calendars/usa__en%40holiday.calendar.google.com/events?key=my_api_key', 
      events: "getLeaveRequests_byDept.cfc?method=getMyData", 
      timeFormat: ' ', // uppercase H for 24-hour clock 
      eventDrop: function(event, delta) { 
       alert(event.title + ' was moved ' + delta + ' days\n' + 
        '(should probably update your database)'); 


      }   
     }); 

    }); 
</script> 

<title>Calendar</title></head> 

<body> 

<div id='calendar'> 
</div> 

</body> 
</html> 

を時間を残すことを完璧に働いfullCalendarを持って、私は次のように追加:gcal.jsファイル(Googleカレンダージャバスクリプト)そして、試してみて、私の他の日付と一緒に休日を追加するには、以下の2行:

googleCalendarApiKey:'my_api_key', 
url: 'https://www.googleapis.com/calendar/v3/calendars/usa__en%40holiday.calendar.google.com/events?key=my_api_key', 

は私の日付はまだ細かい表示するが、休日はカレンダーに表示されませんか?何か案は? 、

<html> 

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" /> 
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script> 
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script> 
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script> 
<script src="../fullcalendar-3.1.0/gcal.js"></script> 
<script> 
$(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     var calendar = $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      selectable: true, 
      selectHelper: true, 
      select: function(start, end, allDay) { 
       var title = prompt('Event Title:'); 
       if (title) { 
        calendar.fullCalendar('renderEvent', 
         { 
          title: title, 
          start: start, 
          end: end, 
          allDay: allDay 
         }, 
         true // make the event "stick" 
        ); 
       } 
       calendar.fullCalendar('unselect'); 
      }, 
      editable: true, 
      nextDayThreshold:'00:00:00', 
      // display Leave Requests plus Holidays from Google calendar 
      googleCalendarApiKey: '* my api key *', 
      eventSources: [ 'getLeaveRequests.cfc?method=getMyData', 'en.usa#[email protected]' ], 
      timeFormat: ' ', // uppercase H for 24-hour clock 
      eventDrop: function(event, delta) { 
       alert(event.title + ' was moved ' + delta + ' days\n' + 
        '(should probably update your database)'); 
      }   
     }); 

    }); 
</script> 

<title>Calendar</title></head> 

<body> 

<div id='calendar'> 
</div> 

</body> 
</html> 

私はgcal.jsに追加する必要がありました:

はここでここで働いていた最終的なコードである代わりに、「イベント」

<html> 

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" /> 
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script> 
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script> 
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script> 
<script src="../fullcalendar-3.1.0/gcal.js"></script> 
<script> 
$(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     var calendar = $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      selectable: true, 
      selectHelper: true, 
      select: function(start, end, allDay) { 
       var title = prompt('Event Title:'); 
       if (title) { 
        calendar.fullCalendar('renderEvent', 
         { 
          title: title, 
          start: start, 
          end: end, 
          allDay: allDay 
         }, 
         true // make the event "stick" 
        ); 
       } 
       calendar.fullCalendar('unselect'); 
      }, 
      editable: true, 
      googleCalendarApiKey: 'my_api_key', 
     eventSources: [ 
     { 
      "getLeaveRequests_byDept.cfc?method=getMyData" 
     }, 
     { 
      googleCalendarId: '[email protected]' 
     } 
    ] 
}); 

    }); 
</script> 

<title>Calendar</title></head> 

<body> 

<div id='calendar'> 
</div> 

</body> 
</html> 

の「eventSources」を使用する私の試みですGoogleのAPIキーを追加し、「イベント」を「イベントソース」に変更し、「{}」の代わりに「[]」を使用してください。

+0

この答えは後でhttp://stackoverflow.com/a/35442698/5360631ソースを追加するための助けおよび/または試みること** eventSources:{ '?getLeaveRequests_byDept.cfc方法= getMyData'、 ' en.usa#[email protected] '} **対**イベント** https://fullcalendar.io/docs/event_data/eventSources/ – smcd

答えて

1

最後のコードは gcal.jsに追加してGoogle apiのキーに追加し、「イベント」を「eventSources」に変更し、「{」括弧を「{ }」

<html> 

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" /> 
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script> 
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script> 
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script> 
<script src="../fullcalendar-3.1.0/gcal.js"></script> 
<script> 
$(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     var calendar = $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      selectable: true, 
      selectHelper: true, 
      select: function(start, end, allDay) { 
       var title = prompt('Event Title:'); 
       if (title) { 
        calendar.fullCalendar('renderEvent', 
         { 
          title: title, 
          start: start, 
          end: end, 
          allDay: allDay 
         }, 
         true // make the event "stick" 
        ); 
       } 
       calendar.fullCalendar('unselect'); 
      }, 
      editable: true, 
      nextDayThreshold:'00:00:00', 
      // display Leave Requests plus Holidays from Google calendar 
      googleCalendarApiKey: '* my api key *', 
      eventSources: [ 'getLeaveRequests.cfc?method=getMyData', 'en.usa#[email protected]' ], 
      timeFormat: ' ', // uppercase H for 24-hour clock 
      eventDrop: function(event, delta) { 
       alert(event.title + ' was moved ' + delta + ' days\n' + 
        '(should probably update your database)'); 
      }   
     }); 

    }); 
</script> 

<title>Calendar</title></head> 

<body> 
2

Google認定資格を追加するだけでは、 、だからfullCal endarはそれらを使用します。効果的にあなたがここに持っていることは、複数のイベントソースであるので、その機能を使用します。

$('#calendar').fullCalendar({ 
    //...all your other config...then: 
    googleCalendarApiKey: '<YOUR API KEY>', 
    eventSources: [ 
     { 
      "getLeaveRequests_byDept.cfc?method=getMyData" 
     }, 
     { 
      googleCalendarId: '[email protected]' 
     } 
    ] 
}); 

のドキュメントを参照してください:複数のイベントソースの例を含む、fullCalendarでGoogleカレンダーを設定する方法に関するさらに詳細についてhttps://fullcalendar.io/docs/google_calendar/

また、「url」プロパティを提供できるというアイデアがどこにあるのかわかりません。ドキュメント内のどこにも定義されておらず、効果はありません。 Googleカレンダーの場合、APIキーとカレンダーIDで十分です。カレンダーが実際にあなたのものでない場合、あなたはIDを掻き集める必要があります - 私はそれを試していませんが、コメントに記載されている答え(full calendar, events holidays and own events)は公開カレンダーのIDを検出する方法を示唆しています。

+0

あなたの提案に複数の追加方法を試みましたカレンダーは空白のページを表示しますか? (上記の私の編集した項目を見て、私が試したことを示しています) "events"ではなく "eventSources"を使用するようにコードを更新する方法がわかりません。 ps:これはURLを使用するためのリンクです:https://fullcalendar.io/docs/event_data/addEventSource/ – jlig

+0

これは私が示したのとまったく同じです - あなたの "イベント"プロパティを "イベントソース"を表示されます。 eventSources配列内の各項目は、イベントのリストに解決される必要があります。あなたはそれがうまくいくように見えてきました。 P.S.リンクしたaddEventSourceメソッドを使用していた場合は、カレンダーの元の設定のプロパティではなく、そのメソッドの引数として「url」を指定します。そしてあなたのコードはそのメソッドを呼び出さない。 – ADyson

+0

まだ空白のページが貼ってありますか?他に何を試すかわからない上記の私の更新されたコードは私に空白のページを与えます。とにかく助けてくれてありがとう。 – jlig

関連する問題