技術
カレンダーを表示する(JS)
こんにちは！
ソリューションセクションの日野です
1月ももう半月が過ぎましたね
最近コロナもまた急増していますので皆様もお気を付けください
今回はLaravelの環境でFullCalendar（ 公式Docs ）を使用してみたので導入から簡単な使い方を紹介します
設置例
実際に設置してみるとこんな感じになります
導入
今回は CDN を使用しました
（npmやZipでダウンロードもできます！）
main.jsとmain.cssを読み込むだけです
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js" charset="UTF=8"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">使い方
表示したいdivタグにidを付けて配置します
<div id="calendar"></div>後はJSでカレンダーを生成します！
document.addEventListener('DOMContentLoaded', function() {
var today=new Date();
var calendarE1 = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarE1, {
locale: 'ja',
initialView: 'dayGridMonth',
events: [{
'start': today,
'end': today,
'title': 'イベント',
'color': 'red'
}],
contentHeight: 'auto',
});
calendar.render();
});めっちゃ簡単ですね！
ちなみに今回は月表示ですがinitialViewを変更すると週表示や日表示にもできます！
timeGridWeek :週表示
timeGridDay :日表示
他にもlistViewやdayGridViewなど、プレミアムメニューではTimeLineViewなどもあるのでぜひ試してみてください🐰
ちなみに土日の背景色はデフォルトのままだと色がついていないのでCSSでつけています↓
th.fc-day-sat,
td.fc-day-sat{
background-color: #eaf4ff;
}
th.fc-day-sun,
td.fc-day-sun{
background-color: #ffeaea;
}今回はイベントをそのまま配列で渡していますが、APIで取得したりもできるので詳しい使い方は公式DocsやFullCalendarで調べてみてくださいね！
カレンダーの表示とかも今は月表示ですが週表示やタイムラインなどもいろいろあるので公式のデモを見るだけでも結構面白いですよ！
今回はこの辺で！それでは！
