FullCalendarにて。カレンダーの曜日と年・月を取得したい

カレンダーの曜日を取得して中身を書き換えたいです

Nuxt.jsとFullCalendarでカレンダーを作成中です。

英語表記カレンダーの曜日を取得して、日本語を加えたいです。
Sun Mon Tue Wed　となっている曜日を
Sun日 Mon月 Tue火 Wed水　と変えたいです。

発生している問題・エラーメッセージ

曜日の取得の仕方が全くわかりません。ドキュメントにも載っていないようでした。

試したこと

ドキュメント他の質問色々見ましたが助けになりそうなものが見つかりませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことをしたいのかな

html
1<!DOCTYPE html>
2<html lang='en'>
3  <head>
4    <meta charset='utf-8' />
5
6    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />
7    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />
8
9    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>
10    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>
11
12    <script>
13
14      document.addEventListener('DOMContentLoaded', function() {
15        var calendarEl = document.getElementById('calendar');
16
17        var calendar = new FullCalendar.Calendar(calendarEl, {
18          plugins: [ 'dayGrid' ],
19          columnHeaderText: function(date) {
20            return(["日", "月", "火", "水", "木", "金", "土"][date.getDay()]);
21          }
22        });
23
24        calendar.render();
25      });
26
27    </script>
28  </head>
29  <body>
30
31    <div id='calendar'></div>
32
33  </body>
34</html>

vueファイルだとこうかな

vue
1<template>
2  <FullCalendar
3    defaultView="dayGridMonth"
4    :plugins="calendarPlugins"
5    :columnHeaderText="columnHeaderText"
6  />
7</template>
8
9<script>
10  import FullCalendar from '@fullcalendar/vue'
11  import dayGridPlugin from '@fullcalendar/daygrid'
12  import timeGridPlugin from '@fullcalendar/timegrid'
13  import interactionPlugin from '@fullcalendar/interaction'
14
15  export default {
16    components: {
17      FullCalendar
18    },
19    data () {
20      return {
21        calendarPlugins: [
22          dayGridPlugin,
23          timeGridPlugin,
24          interactionPlugin
25        ],
26      };
27    },
28    methods: {
29      columnHeaderText(date) {
30        return(["日", "月", "火", "水", "木", "金", "土"][date.getDay()]);
31      }
32    }
33  }
34</script>
35
36<style lang="scss">
37  @import './node_modules/@fullcalendar/core/main.css';
38</style>