Nepali DateNepali DateBikram Sambat Date Engine
Static Methods

NepaliDate.getCalendarDays()

Static utility to generate a complete forty two cell calendar grid matrix for any month and year.

The getCalendarDays static method generates a complete forty two cell grid structure representing six rows of seven days for displaying a monthly calendar view. It includes trailing days from the previous month and leading days from the next month to fill out the matrix, simplifying the creation of date pickers and visual calendar components.


Import

import { NepaliDate } from "nepali-date-library";

Signature

static getCalendarDays(
  year: number,
  month: number
): {
  prevRemainingDays: number;
  prevMonth: { year: number; month: number; days: number[] };
  currentMonth: { year: number; month: number; days: number[] };
  nextMonth: { year: number; month: number; days: number[] };
  remainingDays: number;
};

Parameters

ParameterTypeRequiredDescription
yearnumberYesBikram Sambat year (e.g. 2081).
monthnumberYesZero-indexed month (0-11, where 0 is Baisakh and 11 is Chaitra).

Return Value

  • Type: Object containing calendar grid sections:
    • prevRemainingDays: Number of leading days from the previous month needed to reach the first day's weekday.
    • prevMonth: Object containing year, month, and days array for preceding filler dates.
    • currentMonth: Object containing year, month, and days array (1 through daysInMonth) for the active month.
    • nextMonth: Object containing year, month, and days array for succeeding filler dates to complete 42 cells.
    • remainingDays: Number of trailing days in nextMonth.

Exceptions

Throws an Error if the year or month index is invalid:

"Invalid year or month"

Examples

Building a Monthly UI Calendar Grid

import { NepaliDate } from "nepali-date-library";

// Generate grid for Baisakh 2081
const grid = NepaliDate.getCalendarDays(2081, 0);

console.log("Leading days count:", grid.prevRemainingDays);
console.log("Leading days:", grid.prevMonth.days);
console.log("Active month days:", grid.currentMonth.days);
console.log("Trailing days:", grid.nextMonth.days);

Rendering a 42-Cell React Calendar

import React from "react";
import { NepaliDate } from "nepali-date-library";

export function NepaliCalendarView({ year, month }: { year: number; month: number }) {
  const grid = NepaliDate.getCalendarDays(year, month);

  return (
    <div className="grid grid-cols-7 gap-1">
      {/* Leading days from previous month */}
      {grid.prevMonth.days.map((d) => (
        <div key={`prev-${d}`} className="text-gray-400 p-2 text-center">
          {d}
        </div>
      ))}

      {/* Active month days */}
      {grid.currentMonth.days.map((d) => (
        <div key={`curr-${d}`} className="font-semibold p-2 text-center">
          {d}
        </div>
      ))}

      {/* Trailing days from next month */}
      {grid.nextMonth.days.map((d) => (
        <div key={`next-${d}`} className="text-gray-400 p-2 text-center">
          {d}
        </div>
      ))}
    </div>
  );
}

Advertisement

On this page