全历非公历月份

Question

我正在寻找一种方法来显示除以希伯来历月份的全日历月份网格。

我设法使用

dayCellContent

（包括引导类）在月份网格视图的单元格中显示希伯来语日期：

//Array of letters representing the day of the month
const hebDateLetters = ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ז', 'ח', 'ט', 'י', 'יא', 'יב', 'יג', 'יד', 'טו', 'טז', 'יז', 'יח', 'יט', 'כ', 'כא', 'כב', 'כג', 'כד', 'כה', 'כו', 'כז', 'כח', 'כט', 'ל',]; 

...

dayCellContent: (info)=>{
        var hebDate = new Intl.DateTimeFormat('he-IL-u-ca-hebrew', {day: 'numeric'}).format(info.date);
        var hebMonth = new Intl.DateTimeFormat('he-IL-u-ca-hebrew', {month: 'long'}).format(info.date);

        //Container element
        const container = document.createElement("div");
        container.setAttribute("class", "container p-1"); 

        //First row element
        const elRow1 = document.createElement("div");
        elRow1.setAttribute("class", 'row m-0 w-100');
        const elCol1 = document.createElement("div");
        elCol1.setAttribute("class", 'col p-0');
        elCol1.innerText = hebDate !=1 ? hebDateLetters[hebDate-1] : hebDateLetters[hebDate-1] + " " + hebMonth; // Condition to display Hebrew month name on first day of the month
        elRow1.appendChild(elCol1);

        //Second row element
        const elRow2 = document.createElement("div");
        elRow2.setAttribute("class", 'row m-0 w-100');
        const elCol2 = document.createElement("div");
        elCol2.setAttribute("class", 'col p-0 c-date');
        elCol2.innerText = info.date.getDate();
        elRow2.appendChild(elCol2);

        container.appendChild(elRow1);
        container.appendChild(elRow2);
        return {html: container.outerHTML};
      }

这就是我所取得的成就

我的下一步是根据希伯来历显示月份。我一直在尝试构建一个自定义视图，如下所述：使用 JS 的自定义视图，但我不完全确定如何使用它来实现我正在寻找的内容。

Answer 1

最好的选择是使用希伯来语语言环境。完整的日历已经有了。

添加对此的引用

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales/he.js"></script>
<script>
new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'he',
    //...
});
</script>

与您的代码结合给出结果

const hebDateLetters = ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ז', 'ח', 'ט', 'י', 'יא', 'יב', 'יג', 'יד', 'טו', 'טז', 'יז', 'יח', 'יט', 'כ', 'כא', 'כב', 'כג', 'כד', 'כה', 'כו', 'כז', 'כח', 'כט', 'ל',];
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'he',
    dayCellContent: (info)=>{
        var hebDate = new Intl.DateTimeFormat('he-IL-u-ca-hebrew', {day: 'numeric'}).format(info.date);
        var hebMonth = new Intl.DateTimeFormat('he-IL-u-ca-hebrew', {month: 'long'}).format(info.date);

        //Container element
        const container = document.createElement("div");
        container.setAttribute("class", "container p-1"); 

        //First row element
        const elRow1 = document.createElement("div");
        elRow1.setAttribute("class", 'row m-0 w-100');
        const elCol1 = document.createElement("div");
        elCol1.setAttribute("class", 'col p-0');
        elCol1.innerText = hebDate !=1 ? hebDateLetters[hebDate-1] : hebDateLetters[hebDate-1] + " " + hebMonth; // Condition to display Hebrew month name on first day of the month
        elRow1.appendChild(elCol1);

        //Second row element
        const elRow2 = document.createElement("div");
        elRow2.setAttribute("class", 'row m-0 w-100');
        const elCol2 = document.createElement("div");
        elCol2.setAttribute("class", 'col p-0 c-date');
        elCol2.innerText = info.date.getDate();
        elRow2.appendChild(elCol2);

        container.appendChild(elRow1);
        container.appendChild(elRow2);
        return {html: container.outerHTML};
      }
  });
  calendar.render();
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales/he.js"></script>
<div id="calendar"></div>