はじめに
ひさびさに・・FullCalendarを使おうと思って・・・
jQuery版からReact、Angular、Vueに代わってた・・・javascript版？ES6
調べてみた。。。
Ver4から対応の様で、Ver3は2021にアップデートがあって現在、v3.10.5のよう・・
https://github.com/fullcalendar/fullcalendar
過去は下記から
https://github.com/fullcalendar/fullcalendar/releases
TimelineとVertical Resourceは有償です。
Ver 3.10.5
Ver 3.10.5落としてみたこんな感じ、localeは日本語だけにしてます。。長いので・・
└─fullcalendar-3.10.5
│ CHANGELOG.txt
│ CONTRIBUTING.txt
│ fullcalendar.css
│ fullcalendar.js
│ fullcalendar.min.css
│ fullcalendar.min.js
│ fullcalendar.print.css
│ fullcalendar.print.min.css
│ gcal.js
│ gcal.min.js
│ LICENSE.txt
│ locale-all.js
│
├─demos
│ │ agenda-views.html
│ │ background-events.html
│ │ basic-views.html
│ │ default.html
│ │ external-dragging.html
│ │ gcal.html
│ │ json.html
│ │ list-views.html
│ │ locales.html
│ │ selectable.html
│ │ themes.html
│ │ timezones.html
│ │ week-numbers.html
│ │
│ ├─js
│ │ theme-chooser.js
│ │
│ ├─json
│ │ events.json
│ │
│ └─php
│ get-events.php
│ get-timezones.php
│ utils.php
│
├─lib
│ jquery-ui.min.js
│ jquery.min.js
│ moment.min.js
│
└─locale
ja.js
demosも健在ですね。
headタグに下記を
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<!-- 日本語 -->
<script src='locale/ja.js'></script>
scriptで定義します。
<script>
$(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
locale:'ja',
// put your options and callbacks here
})
});
</script>
表示したい箇所に下記のタグを書きます。
<div id='calendar'></div>
Ver 6.1.4
Ver 6.1.4落としてみたこんな感じ、localeは日本語だけにしてます。。長いので・・
└─fullcalendar-6.1.4
│ LICENSE.md
│ README.md
│
├─dist
│ index.global.js
│ index.global.min.js
│
├─examples
│ background-events.html
│ daygrid-views.html
│ external-dragging-2cals.html
│ external-dragging-builtin.html
│ full-height.html
│ list-sticky-header.html
│ list-views.html
│ month-view.html
│ multimonth-view.html
│ multiweek-view.html
│ natural-height.html
│ selectable.html
│ timegrid-views.html
│
└─packages
├─bootstrap4
│ index.global.js
│ index.global.min.js
│
├─bootstrap5
│ index.global.js
│ index.global.min.js
│
├─core
│ │ index.global.js
│ │ index.global.min.js
│ │ locales-all.global.js
│ │ locales-all.global.min.js
│ │
│ └─locales
│ ja.global.js
│ ja.global.min.js
│
├─daygrid
│ index.global.js
│ index.global.min.js
│
├─google-calendar
│ index.global.js
│ index.global.min.js
│
├─icalendar
│ index.global.js
│ index.global.min.js
│
├─interaction
│ index.global.js
│ index.global.min.js
│
├─list
│ index.global.js
│ index.global.min.js
│
├─luxon1
│ index.global.js
│ index.global.min.js
│
├─luxon2
│ index.global.js
│ index.global.min.js
│
├─moment
│ index.global.js
│ index.global.min.js
│
├─moment-timezone
│ index.global.js
│ index.global.min.js
│
├─multimonth
│ index.global.js
│ index.global.min.js
│
├─rrule
│ index.global.js
│ index.global.min.js
│
├─timegrid
│ index.global.js
│ index.global.min.js
│
└─web-component
index.global.js
index.global.min.js
headタグに下記を
<script src='../dist/index.global.js'></script>
<script src='../packages/core/locales/ja.global.min.js'></script>
scriptで定義します。
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale:'ja',
// put your options and callbacks here
});
calendar.render();
});
</script>
表示したい箇所に下記のタグを書きます。
<div id='calendar'></div>
引数の違い
background-events.htmlで比較
| Ver3 | Ver6 |
| header | headerToolbar |
| defaultDate | initialDate |
ver 6系
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2023-01-12',
ver 3系
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2021-11-12'
defaultDate、initialDateは、初めに表示したい年月日を指定、指定しない場合は現在月日
カレンダー上の予定表示の配列
var events = [
{
start: "2023-02-02T10:00:00",
end: "",
title: "",
url: "URL",
color: "#xxxxx",
},
];
navLinks true/false カレンダー内の日付クリックで日表示するかどうか
色替えは、下記にclassが準備されているのでお好みで
fc-sun
fc-mon
fc-tue
fc-wed
fc-thu
fc-fri
fc-sat
fc-today
fc-holiday
例・・
.fc-sun {
color: red;
background-color: #fff0f0;
}
祝日を追加する
japanese-holidays.min.jsを使って、追加する。。
年度を指定して・・・こんな感じ・・Ver3用
<script src="//cdn.jsdelivr.net/gh/osamutake/japanese-holidays-js@v1.0.10/lib/japanese-holidays.min.js"></script>
$(document).ready(function() {
var news = [];
var events=[あなたのイベント];
holset(1);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
locale:'ja',
navLinks: true, // can click day/week names to navigate views
events: news
});
$('.fc-prev-button').click(function(){
holset(0);
});
$('.fc-next-button').click(function(){
holset(0);
});
function holset(first) {
var nowdate = $('#calendar').fullCalendar('getDate');
var get_yyyy = moment(nowdate).format('YYYY');
var holidays = JapaneseHolidays.getHolidaysOf(get_yyyy);
news = [];
holidays.forEach(function(holiday) {
var holdate = get_yyyy+'-' +('0'+ holiday.month).slice(-2) +'-'+ ('0'+ holiday.date).slice(-2);
news.push( {start: holdate, title: holiday.name, color:""} );
});
news = events.concat(news);
if(first!=1) {
$('#calendar').fullCalendar('removeEvents');
$("#calendar").fullCalendar('addEventSource', news);
$('#calendar').fullCalendar('rerenderEvents');
}
}
});
さいごに
とりあず。メモ
