kintoneプラグイン《カレンダーPlus》でどうしても和暦表示させたい方へ

本カスタマイズは、2019年3月にリリースされたばかりのCalendar Plus JavaScript APIを利用します。早速プログラムを見てみましょう。（jQueryを使用しています）

jQuery.noConflict();
(function($) {
    "use strict";

    // 一覧画面表示時イベント
    kintone.events.on('app.record.index.show', function(e) {
        // 和暦取得関数
        var getEra = function(date) {
            var warekiObj = {
                '明治': {
                    'start': '1868-01-25',
                    'end': '1912-07-29'
                },
                '大正': {
                    'start': '1912-07-30',
                    'end': '1926-12-24'
                },
                '昭和': {
                    'start': '1926-12-25',
                    'end': '1989-01-07'
                },
                '平成': {
                    'start': '1989-01-08',
                    'end': '2019-04-30'
                },
                '令和': {
                    'start': '2019-05-01',
                    'end': ''
                }
            };

            var era, start;
            Object.keys(warekiObj).forEach(function(key) {
                var s_tmp = moment(warekiObj[key].start);
                var e_tmp = (warekiObj[key].end) ? moment(warekiObj[key].end) : null;
                if ((date.isSame(s_tmp) || date.isAfter(s_tmp)) && (!e_tmp || date.isBefore(e_tmp.add(1, 'days')))) {
                    era = key;
                    start = s_tmp;
                }
            });

            var warekiYear = (start) ? date.year() - start.year() + 1 : '';
            return (era) ? era + ((warekiYear === 1) ? '元' : warekiYear) + '年' : null;
        }

        // カレンダー画面の描画後イベント
        calendarplus.events.on('cp.calendar.show', function(event) {
            var view = event.view;
            var type = view.type;
            var start = view.currentRange.start;
            var end = view.currentRange.end;
            var era = getEra(start);

            var wareki;
            if (era) {
                if (type === 'timelineYear') {
                    wareki = era;
                } else if (type === 'month' || type === 'timelineMonth') {
                    wareki = era + ' ' + start.format('M') + '月';
                } else if (type === 'agendaWeek' || type === 'timelineWeek') {
                    wareki = era + start.format('M') + '月' + start.format('D') + '日(' + start.format('dd') + ')～' + end.format('M') + '月' + end.format('D') + '日(' + end.format('dd') + ')';
                } else if (type === 'agendaDay' || type === 'timelineDay') {
                    wareki = era + start.format('M') + '月' + start.format('D') + '日(' + start.format('dd') + ')';
                }
                if (wareki) {
                    $('.fc-center h2').text(wareki);
                }
            }
            return event;
        });

        return e;
    });
})(jQuery);

和暦計算の詳細は省きますが、47行目から始まるカレンダー描画後イベント発生時に現在表示中の日付を取得し、8行目の和暦取得関数で和暦に変換して、66行目でカレンダー画面上部中央の日付表示を上書きで切り替えています。

以下が実際に表示させてみた例です。

平成最後

令和元年

Calendar Plus JavaScript APIを使うと、カレンダーPlus本体では対応していない表示や機能を実装することができます。ぜひ試してみてください。