diketa
@diketa

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

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

No Answers yet.

Your answer might help someone💌