Q&A
おっと、もう一つのほうを追求してたら遅かったな。
javascriptライブラリのFullCalendar（5.5.1）を使用して１週間分のカレンダーを作成しています。
現在は以下のような表示です。
実現したいのは、
・左枠の時間形式を「9時」ではなく「9:00」としたいです。（「××時」を「××:00」としたいです。）
の２点です。
具体的には以下のイメージです。
現状のコードは以下のとおりです。
javascript
1 document.addEventListener('DOMContentLoaded', function() { 2 var calendarEl = document.getElementById('calendar'); 3 4 var calendar = new FullCalendar.Calendar(calendarEl, { 5 locale: 'ja', 6 headerToolbar: { 7 left: 'prev,next today', 8 center: 'title', 9 right: '', 10 }, 11 initialView: 'timeGridWeek', 12 firstDay: (new Date()).getDay(), 13 validRange: { 14 start: new Date() 15 }, 16 businessHours: true, 17 editable: true, 18 selectable: true, 19 slotMinTime: '09:00:00', 20 slotMaxTime: '22:00:00', 21 slotDuration: '00:15:00', 22 slotLabelInterval: '00:30', 23 events: [ 24 ] 25 }); 26 27 calendar.render(); 28 }); 29
html
1<div id="calendar"></div>
いろいろ調べたのですがVersionが違うのか駄目でした。
お知恵をお貸しください。
よろしくお願いします。
回答2件
0
ベストアンサー
slotLabelFormatというパラメータを使用して見てください。
omitZeroMinuteがデフォルトではtrueになっているので、ここをfalseにするとxx時0分のときに省略しなくなり、
x:00と表示されます。
https://fullcalendar.io/docs/slotLabelFormat
以下にサンプルコードを記載します。
<html> <link rel='stylesheet' type='text/css' href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css" type="css" /> <script type='text/javascript' src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.js"></script> <script type='text/javascript' src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/locales-all.js"></script> <body> <div id="calendar"></div> </body> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { locale: 'ja', headerToolbar: { left: 'prev,next today', center: 'title', right: '', }, initialView: 'timeGridWeek', firstDay: (new Date()).getDay(), validRange: { start: new Date() }, businessHours: true, editable: true, selectable: true, slotMinTime: '09:00:00', slotMaxTime: '22:00:00', slotDuration: '00:15:00', slotLabelInterval: '00:30', slotLabelFormat: { hour: 'numeric', minute: '2-digit', omitZeroMinute: false, meridiem: 'short' }, events: [] }); calendar.render(); }); </script> </html>
投稿2021/01/27 00:51
編集2021/01/27 00:53
退会済みユーザー
総合スコア0
0
左枠の時間形式を「9時」ではなく「9:00」としたいです。（「××時」を「××:00」としたいです。）
カレンダー生成時のパラメーターにslotLabelFormatを追加。omitZeroMinuteをfalseにすると、0分でも分表示が行なわれる。また、hourを2-digitにすると、09:00のように0埋め表示になる。
JavaScript
1 slotLabelFormat: { 2 hour: 'numeric', 3 minute: '2-digit', 4 omitZeroMinute: false 5 },
投稿2021/01/27 01:28
総合スコア11990
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/27 01:24