FullCalenderに予定を入力し、クリックでジャンプするようにしたい
解決したいこと
FullCalenderに予定を簡単に入力したい。また、入力した予定をクリックすると詳細ページにジャンプするようにしたい。
発生している問題・エラー
現在予定はJavaScriptで記入する方法と、Google Calenderとリンクする方法をできるようになりましたが、いずれも予に定をクリックすると予定の詳細ページにジャンプするよう実装する方法がわかりません。
また、予定の入力もできればJavaScriptの知識が無くてもできるようにしたい。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
//FullCalender
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
//以下により表示をカスタマイズ
timeZone: "Asia/Tokyo", //海外からアクセスの場合に念のため
locale: 'ja',
headerToolbar: {
left: 'title',
center: '',
right: 'prev today dayGridMonth,timeGridWeek,timeGridDay,listMonth next'
},
//日本語表記の日が削除できる
dayCellContent: function(arg){
return arg.date.getDate();
},
initialDate: '2023-01-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
buttonText: {
prev: '<', // <
next: '>', // >
today: '本日',
month: '月',
week: '週',
day: '日',
list: '一覧',
},
allDayText: '終日',
//週表示をデフォルトの1/8(日)→日に変える
views: {
week: {
dayHeaderContent: function(arg) {
return arg.date.toLocaleString('default', { weekday: 'short' });
}
}
},
//Google連携
events:'xxxx@gmail.com',
googleCalendarApiKey: 'xxxxxxxxxxxx',
//はみ出たイベントをhoverしたときに表示
eventDidMount: (e)=>{
tippy(e.el, {
content: e.event.title,
});
},
//祝日カレンダー
googleCalendarId: 'ja.japanese#holiday@group.v.calendar.google.com',
//イベント Google連携するなら不要
events: [
{
title: 'Business LunchBusiness LunchBusiness Lunch',
start: '2023-01-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2023-01-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2023-01-18',
end: '2023-01-20'
},
{
title: 'Party',
start: '2023-01-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2023-01-11T10:00:00',
end: '2023-01-11T16:00:00',
display: 'background'
},
{
groupId: 'availableForMeeting',
start: '2023-01-13T10:00:00',
end: '2023-01-13T16:00:00',
display: 'background'
},
// red areas where no events can be dropped
{
start: '2023-01-24',
end: '2023-01-28',
overlap: false,
display: 'background',
color: '#ff9f89'
},
{
start: '2023-01-06',
end: '2023-01-08',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
//ここまで
});
calendar.render();
});
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
●Google Calenderにリンク先を貼ってみましたが、クリックしてもGoogle Calenderが開かないようにしている為、リンクをクリックすることができませんでした。
●予定をクリックするとPOPアップするようにして、予定の中にリンク先のURLを貼ってみましたが、クリックできませんでした。
●jsに直接書くことはできますが、知識がない人でも使えるようにしたい。
●予定を簡単に入力する方法、それをクリックしたら詳細ページにジャンプする方法のJavaScriptの書き方を教えていただけますと助かります。
宜しくお願い致します。
0