A Minimalist JavaScript Calendar (not a date picker)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.markdown fix calendar not showing in IE Mar 1, 2016


Dr.Cal 2.0 - A Minimalist JavaScript Calendar (not a date picker)

Demo at http://www.minjs.com/#drcal


Dr.Cal generates a calendar in a <table>. It leaves most of the rest of the work to you.

How to Use

var cal = drcal(); // returns a <table>


To display weekday/month names in a language other than english, pass them in as options. Note that weeks begin on Sunday for Dr.Cal.

var cal = drcal({'weekdays': ['', '', '', '', '', '', ''],
                 'months': ['1月', '2月', '3月', '4月', '5月', '6月',
                            '7月', '8月', '9月', '10月', '11月', '12月']});

To start weeks on Monday, pass 1 as the option startDay.

var cal = drcal({'startDay': 1});

No matter which day you choose to start the week, if you pass weekday names they must start on Sunday. This is because JavaScript considers weeks to begin on Sunday (day 0) and end on Saturday (day 6). Sticking to this representation internally allows us to keep the code simple. So to combine the above options:

var cal = drcal({'weekdays': ['', '', '', '', '', '', ''],
                 'months': ['1月', '2月', '3月', '4月', '5月', '6月',
                            '7月', '8月', '9月', '10月', '11月', '12月'],
                 'startDay': 1});


Dr.Cal renders a basic table and attaches some attributes to each day (a table cell (<td>)). The contents of the cell are up to you. To add anything extra, you can hook into the drcal.renderDay event. For example, to add the day number to each cell that's rendered:

cal.addEventListener('drcal.renderDay', function (event) {

The event's detail will contain:

  • element - the <td>/date DOM element that we're rendering
  • date - the JavaScript date for the date we're rendering


The table returned by drcal() also has some helper functions:

  • year() - return the current year (as a 4-digit integer)
  • month() - return the current month (as an integer in the range [1,12])
  • findCell(date) - return the cell containing the given JavaScript date
  • changeMonth(date) - change to the month containing the given JavaScript date

For example, to get the current month that is being displayed:

var cal = drcal();


You can also listen for these events:

  • drcal.renderDay - fired when a day is rendered for the first time
  • drcal.monthChange - fired every time the month is changed


  • First day displayed - cal.querySelector('td')
  • First day of the displayed month - cal.querySelector('td.current')

Unsupported Browsers

  • Internet Explorer <= 9