javascript
/
fullcalendar
зеркало из https://github.com/fullcalendar/fullcalendar.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html>
  <head>
    <script type='importmap'>
      {
        "imports": {
          "preact": "../../packages/core/node_modules/preact/dist/preact.mjs",
          "preact/compat": "../../packages/core/node_modules/preact/compat/dist/compat.mjs",
          "preact/hooks": "../../packages/core/node_modules/preact/hooks/dist/hooks.mjs",
          "@fullcalendar/core": "../../packages/core/dist/index.js",
          "@fullcalendar/core/index.js": "../../packages/core/dist/index.js",
          "@fullcalendar/core/internal.js": "../../packages/core/dist/internal.js",
          "@fullcalendar/core/preact.js": "../../packages/core/dist/preact.js",
          "@fullcalendar/daygrid": "../../packages/daygrid/dist/index.js",
          "@fullcalendar/daygrid/internal.js": "../../packages/daygrid/dist/internal.js",
          "@fullcalendar/timegrid": "../../packages/timegrid/dist/index.js",
          "@fullcalendar/timegrid/internal.js": "../../packages/timegrid/dist/internal.js",
          "@fullcalendar/list": "../../packages/list/dist/index.js",
          "@fullcalendar/list/internal.js": "../../packages/list/dist/internal.js"
        }
      }
    </script>
    <script type='module'>
      import { Calendar } from '@fullcalendar/core'
      import dayGridPlugin from '@fullcalendar/daygrid'
      import timeGridPlugin from '@fullcalendar/timegrid'
      import listPlugin from '@fullcalendar/list'

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new Calendar(calendarEl, {
          plugins: [dayGridPlugin, timeGridPlugin, listPlugin],
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          },
          initialDate: '2020-09-12',
          editable: true,
          navLinks: true, // can click day/week names to navigate views
          dayMaxEvents: true, // allow "more" link when too many events
          events: [
            {
              title: 'All Day Event',
              start: '2020-09-01'
            },
            {
              title: 'Long Event',
              start: '2020-09-07',
              end: '2020-09-10'
            },
            {
              groupId: 999,
              title: 'Repeating Event',
              start: '2020-09-09T16:00:00'
            },
            {
              groupId: 999,
              title: 'Repeating Event',
              start: '2020-09-16T16:00:00'
            },
            {
              title: 'Conference',
              start: '2020-09-11',
              end: '2020-09-13'
            },
            {
              title: 'Meeting',
              start: '2020-09-12T10:30:00',
              end: '2020-09-12T12:30:00'
            },
            {
              title: 'Lunch',
              start: '2020-09-12T12:00:00'
            },
            {
              title: 'Meeting',
              start: '2020-09-12T14:30:00'
            },
            {
              title: 'Happy Hour',
              start: '2020-09-12T17:30:00'
            },
            {
              title: 'Dinner',
              start: '2020-09-12T20:00:00'
            },
            {
              title: 'Birthday Party',
              start: '2020-09-13T07:00:00'
            },
            {
              title: 'Click for Google',
              url: 'http://google.com/',
              start: '2020-09-28'
            }
          ]
        });

        calendar.render();
      });
    </script>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
      }

      #script-warning {
        display: none;
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: red;
      }

      #loading {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
      }

      #calendar {
        max-width: 1100px;
        margin: 40px auto;
        padding: 0 10px;
      }
    </style>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>