Natively Pluggable Module

    @jpvmrcd/calendar
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    📅 Calendar

    Coverage Status

    A lightweight JavaScript library for generating simple HTML table calendar.

    Sun Mon Tue Wed Thu Fri Sat
    1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30

     

    Usage

    Using npm:

    npm install @jpvmrcd/calendar --save
    <div id="calendar"></div>
    import { Calendar } from '@jpvmrcd/calendar';
    
    const cal = new Calendar(document.getElementById('calendar'));
    cal.render();

    using CDN:

    <div id="calendar"></div>
    
    <script src="https://unpkg.com/@jpvmrcd/calendar/dist/calendar.min.js"></script>
    var cal = new jpvmrcd.calendar.Calendar(document.getElementById('calendar'));
    cal.render();

     

    Methods

    render(year?: number, month?: number): Date

    Generates a calendar based on year and month arguments. If no arguments are passed, the calendar renders the current month and year.

    Parameters

    Name Type Description
    year number A number corresponding the year to be rendered.
    month number A zero based number corresponding the month to be rendered (zero is first month).

     

    Properties

    Name Type Description
    options calendarOptions The rendering options for the calendar.
    month number The zero based month of the rendered calendar.
    year number The full year of the rendered calendar.
    element HTMLElement The parent HTML element of the calendar.

     

    Types

    calendarOptions

    Name Type Description
    dayNames string[7] Sets the days of the week. Should start from Sunday.
    startDay string Sets the start day of the week. The value for startDay should match one of the values defined in dayNames. Defaults to Sun.
    onCellAdded (args: onCellAddedArgs) => void Event triggered on every calendar cell added to the calendar.
    onDateClicked (args: onDateClicked) => void Event triggered on every calendar date cell click.

    onCellAddedArgs

    Name Type Description
    td HTMLTableCellElement Current td being rendered.
    dateISOString string ISO formatted date of the cell being rendered.

    onDateClicked

    Name Type Description
    event Event The Event triggered.
    dateISOString string ISO formatted date of cell clicked.

     

    Examples

    Render calendar for the current month year.

    const cal = new Calendar(document.getElementById('calendar'));
    cal.render();

    Calendar properties and render() return value

    const cal = new Calendar(document.getElementById('calendar'));
    const date = cal.render(2021, 0);
    
    console.log(cal.month);
    > 0
    
    console.log(cal.year);
    > 2021
    
    console.log(cal.element);
    > <div id="calendar">...</div>

    Render calendar with custom option.dayNames

    const cal = new Calendar(document.getElementById('calendar'));
    cal.options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
    cal.render();

    Render calendar with options.startDay

    const cal = new Calendar(document.getElementById('calendar'));
    cal.options.startDay = 'Mon';
    cal.render();

    Render calendar with option.dayNames and option.startDay

    const cal = new Calendar(document.getElementById('calendar'));
    cal.options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
    cal.options.startDay = 'Tu';
    cal.render();

    Change rendered calendar

    const cal = new Calendar(document.getElementById('calendar'));
    cal.render(2021, 0);
    
    // renders calendar for December 2020
    cal.render(cal.year, cal.month + 1);
    
    // renders calendar for January 2021
    cal.render(cal.year, cal.month - 1);

    Render calendar with customized cells using options.onCellAdded

    const cal = new Calendar(document.getElementById('calendar'));
    cal.options.onCellAdded = (args: OnCellAddedArgs) => {
      args.td.innerHTML = `<div>${args.cellDate.getDate()}</div>`;
    };
    cal.render();

    Render calendar with options.OnDateClicked

    const cal = new Calendar(document.getElementById('calendar'));
    cal.options.onDateClicked = (args: OnCellAddedArgs) => {
      console.log(args);
      // > {event: MouseEvent, dateISOString: "YYYY-MM-DD"}
    };
    cal.render();

    Install

    npm i @jpvmrcd/calendar

    DownloadsWeekly Downloads

    253

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • jpvmrcd