Developer-friendly Calendar Generator In JavaScript – Calendar Base

Preview:

Description:

A developer-friendly calendar generator to help you generate customizable calendars with useful manipulation functions.

Works with both browser and node.js environments.

How to use it:

1. Install & download.

# Yarn
$ yarn add calendar-base
# NPM
$ npm install calendar-base --save

2. Import the Calendar Base.

const Calendar = require('calendar-base').Calendar;

3. Or directly load the umd version of the Calendar Base in the HTML document.

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/calendarbase.umd.production.min.js"></script>

4. Initialize the Calendar Base.

const cal = new Calendar();

5. Get the calendar data. This returns an array with the calendar for January 2020.

[
  false,
  false,
  { day: 1, weekDay: 3, month: 0, year: 2020 },
  { day: 2, weekDay: 4, month: 0, year: 2020 },
  { day: 3, weekDay: 5, month: 0, year: 2020 },
  { day: 4, weekDay: 6, month: 0, year: 2020 },
  { day: 5, weekDay: 0, month: 0, year: 2020 },
  ...
]

6. A real-world example showing how to render a calendar on the page.

<h1 class="calendar js-calendar-month"></h1>
<ul class="calendar js-calendar">
  <li class="calendar-day -weekday">Mo</li>
  <li class="calendar-day -weekday">Tu</li>
  <li class="calendar-day -weekday">We</li>
  <li class="calendar-day -weekday">Th</li>
  <li class="calendar-day -weekday">Fr</li>
  <li class="calendar-day -weekday">Sa</li>
  <li class="calendar-day -weekday">Su</li>
</ul>

const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
];
const calendar = new CalendarBase.Calendar({
  siblingMonths: true,
  weekStart: true
});
const today = new Date();
const $calendarMonth = document.querySelector('.js-calendar-month'),
  $calendar = document.querySelector('.js-calendar');
$calendarMonth.innerHTML = months[today.getUTCMonth()];
calendar
  .getCalendar(today.getUTCFullYear(), today.getUTCMonth())
  .forEach(function(date) {
    const div = document.createElement('li');
    if (date) {
      div.className =
        'calendar-day' + (date.siblingMonth ? ' -sibling-month' : '');
      div.innerHTML = date.day;
    }
    $calendar.appendChild(div);
  });

7. This is an example that shows how to implement the Calendar Base in Node.js.

const calendar = new Calendar({ siblingMonths: false, weekStart: 1 });
const today = new Date();
const table = [' Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', '\n'];
calendar
  .getCalendar(today.getUTCFullYear(), today.getUTCMonth())
  .forEach(function(date) {
    if (date) {
      table.push((date.day < 10 ? ' ' : '') + date.day);
      if (date.weekDay == 0) {
        table.push('\n');
      }
    } else {
      table.push('  ');
    }
  });
console.log('This month’s calendar\n', table.join('  '));

8. Possible options to customize the calendar.

const calendar = new CalendarBase.Calendar({
      // start/end dates
      startDate: undefined,
      endDate: undefined,
      // whether to include the previous and next months’ days before and after the current month when generating a calendar
      siblingMonths: false,
      // whether to include the week number on each daywhether to include the week number on each day
      weekNumbers: false,
      // 0 = Sunday
      weekStart: 0
      
});

9. Compare the difference between two dates.

Calendar.diff(
  { year: 2020, month: 0, day: 2 }, 
  { year: 2020, month: 0, day: 20 }
);
// => -18

10. Calculate the number of days between two dates.

Calendar.interval(
  { year: 2020, month: 0, day: 1 }, 
  { year: 2020, month: 0, day: 10 }
);
// => 10

11. Compares two date objects.

Calendar.compare(
  { year: 2020, month: 0, day: 1 }, 
  { year: 2020, month: 0, day: 1 }
);
// => 0
Calendar.compare(
  { year: 2020, month: 0, day: 1 }, 
  { year: 2020, month: 0, day: 10 }
);
// => -1
Calendar.compare(
  { year: 2020, month: 0, day: 10 }, 
  { year: 2020, month: 0, day: 1 }
);
// => 1

12. Get the number of days in the given month.

Calendar.daysInMonth(2020, 1);
// => 29

13. Determine whether the given year is a leap year.

Calendar.isLeapYear(2020);
// => true

14.  Get the week number for the specified date.

Calendar.calculateWeekNumber({year: 1986, month: 9, day: 14 });
// => 42

15.  Set dates.

// e.g. cal.setDate({ year: 2020, month: 2, day: 6 });
Calendar.prototype.setDate(date)
// e.g. cal.setStartDate({ year: 2020, month: 0, day: 1 });
Calendar.prototype.setStartDate(date)
// e.g. cal.setEndDate({ year: 2020, month: 2, day: 20 });
Calendar.prototype.setEndDate(date)

16. Check if a given date is inside the selected dates interval.

cal.isDateSelected({ year: 2015, month: 0, day: 10 });
// => true

Changelog:

v1.2.0 (07/30/2020)

• Make the options an interface and export it

v1.1.1 (05/04/2020)

• Make the options an interface and export it