Get started with tui-calendar CDN

MIT licensed

Tui-Calendar is a lightweight and customizable React calendar component.

Tags:
  • nhnent
  • toast
  • tui
  • component
  • calendar
  • fullcalendar
  • daily
  • weekly
  • monthly
  • business week
  • milestone
  • task
  • allday
  • jquery-plugin

Stable version

Copied!

How to start using tui-calendar CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with tui-calendar CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-calendar.css">
  <style>
    #calendar { width: 100%; height: 60vh; }
  </style>
</head>
<body>
  <div id="calendar"></div>
  <script src="https://cdn.cdnhub.io/tui-calendar/2.0.1/tui-calendar.min.js"></script>
  <script>
    const calendar = new tui.Calendar('#calendar', {
      useKorean: true, // Set to false if you're not using Korean
      selectable: true,
      range: (start, end) => [new Date(start.getFullYear(), start.getMonth(), 1), new Date(end.getFullYear(), end.getMonth() + 1, 0)],
      template: {
        today: {
          backgroundColor: 'blue',
          borderColor: 'transparent',
        },
      },
    });
  </script>
</body>
</html>

All versions