I am looking for a way to display a fullcalenar month grid divided by Hebrew calendar months.
I managed to display the hebrew date within the cells of the month grid view usign 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.