Fullcalendar non-gregorian months

Question

I am looking for a way to display a fullcalenar month grid divided by Hebrew calendar months (Tishrei, Cheshvan etc.).

I managed to display the hebrew date within the cells of the month grid view using dayCellContent (including bootstrap classes):

//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};
      }

This is what I achived

My next step would be to display the months according to the Hebrew calendar. I've been trying to build a custom view as discribed here: Custom view with JS, but I'm not fully sure how to use this to achive what I'm looking for.

Answer 1

The best option is to use the locale as hebrew. Full calendar already has that option.

Add reference to that

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

Combining with your code gives the result

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/core@ 6.1.10/locales/he.js"></script>
<div id="calendar"></div>