Get started with clndr CDN

MIT licensed

Clndr is a cross-platform calendar application for the command line.

Tags:
  • clndr
  • calendar
  • jquery
  • plugin
  • widget
  • jquery-plugin

Stable version

Copied!

How to start using clndr CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with clndr CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/clndr.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clndr.min.js"></script>
  <style>
    #calendar { width: 100%; max-width: 600px; }
  </style>
</head>
<body>
  <div id="calendar"></div>
  <script>
    const calendarEl = document.getElementById('calendar');
    const calendar = new Clndr({
      target: calendarEl,
      nav: {
        previous: '#prev',
        next: '#next'
      },
      templates: {
        dayGridHeaderTemplate: function (date, type) {
          return date.toLocaleString('en-US', { month: 'long', year: 'numeric' });
        }
      }
    });

    document.getElementById('prev').addEventListener('click', () => {
      calendar.previous();
    });

    document.getElementById('next').addEventListener('click', () => {
      calendar.next();
    });

    calendar.render();
  </script>
</body>
</html>
Copied!

All versions