javascript
/
fullcalendar
réplica de https://github.com/fullcalendar/fullcalendar.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src='../../packages/core/dist/index.global.js'></script>
<script src='../../packages/web-component/dist/index.global.js'></script>
<script src='../../packages/interaction/dist/index.global.js'></script>
<script src='../../packages/daygrid/dist/index.global.js'></script>
<script src='../../packages/timegrid/dist/index.global.js'></script>
<script src='../../packages/list/dist/index.global.js'></script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 10px;
  }

</style>
<script>

  document.addEventListener('DOMContentLoaded', () => {
    const el = document.querySelector('full-calendar')
    const api = el.getApi()

    api.on('dateClick', (info) => {
      console.log('dateClick', info)
    })
    api.on('select', (info) => {
      console.log('selected', info)
    })
  })

</script>
</head>
<body>

  <div id='calendar-container'>
    <full-calendar shadow options='{
      "headerToolbar": {
        "left": "prev,next today",
        "center": "title",
        "right": "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
      },
      "initialDate": "2023-01-12",
      "editable": true,
      "selectable": true,
      "businessHours": true,
      "dayMaxEvents": true,
      "events": [
        {
          "title": "All Day Event",
          "start": "2023-01-01"
        },
        {
          "title": "Long Event",
          "start": "2023-01-07",
          "end": "2023-01-10"
        },
        {
          "groupId": 999,
          "title": "Repeating Event",
          "start": "2023-01-09T16:00:00"
        },
        {
          "groupId": 999,
          "title": "Repeating Event",
          "start": "2023-01-16T16:00:00"
        },
        {
          "title": "Conference",
          "start": "2023-01-11",
          "end": "2023-01-13"
        },
        {
          "title": "Meeting",
          "start": "2023-01-12T10:30:00",
          "end": "2023-01-12T12:30:00"
        },
        {
          "title": "Lunch",
          "start": "2023-01-12T12:00:00"
        },
        {
          "title": "Meeting",
          "start": "2023-01-12T14:30:00"
        },
        {
          "title": "Happy Hour",
          "start": "2023-01-12T17:30:00"
        },
        {
          "title": "Dinner",
          "start": "2023-01-12T20:00:00"
        },
        {
          "title": "Birthday Party",
          "start": "2023-01-13T07:00:00"
        },
        {
          "title": "Click for Google",
          "url": "http://google.com/",
          "start": "2023-01-28"
        }
      ]
    }' />
  </div>

</body>
</html>