abdounasser202/calendar.html

## calendar.html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>

    <script>
      // https://fullcalendar.io/docs/initialize-globals-demo
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
          },
          events: [
            {
              title: 'Event 1',
              start: '2023-03-22',
              roomId: 1,
              id: 1,
              status: 'confirmed'
            },
            {
              title: 'Event 2',
              start: '2023-03-24',
              end: '2023-03-26',
              roomId: 2,
              id: 2,
              status: 'pending'
            },
            {
              title: 'Event 3',
              start: '2023-03-25',
              end: '2023-03-27',
              roomId: 3,
              id: 2,
              status: 'cancelled'
            }
          ],
          eventClick: function(info) {
            window.location.href = 'http://localhost:8069/@/appointment/' + info.event.id;
          },
          eventContent: function(info) {
            var status = info.event.extendedProps.status;
            var backgroundColor = '';
            var textColor = '';
            if (status === 'confirmed') {
              backgroundColor = 'green';
              textColor = 'white';
            } else if (status === 'pending') {
              backgroundColor = 'yellow';
              textColor = 'black';
            } else if (status === 'cancelled') {
              backgroundColor = 'red';
              textColor = 'white';
            }
            return {
              html: '<div style="background-color: ' + backgroundColor + '; color: ' + textColor + '">' + info.event.title + '</div>'
            };
          },
          eventDidMount: function(info) {
            var eventEl = info.el;
            var popover = new bootstrap.Popover(eventEl, {
              title: info.event.title,
              content: 'Event details go here',
              trigger: 'hover',
              placement: 'top',
              container: 'body'
            });
          }
        });
        calendar.render();

        // Add date filter
        var dateFilterEl = document.getElementById('date-filter');
        dateFilterEl.addEventListener('change', function() {
          var dateFilter = dateFilterEl.value;
          if (dateFilter) {
            calendar.getEventSources().forEach(function(eventSource) {
              eventSource.remove();
            });
            calendar.addEventSource({
              events: [
                {
                  title: 'Event 1',
                  start: dateFilter + 'T09:00:00',
                  end: dateFilter + 'T10:00:00',
                  roomId: 1
                },
                {
                  title: 'Event 2',
                  start: dateFilter + 'T11:00:00',
                  end: dateFilter + 'T13:00:00',
                  roomId: 2
                },
                {
                  title: 'Event 3',
                  start: dateFilter + 'T14:00:00',
                  end: dateFilter + 'T16:00:00',
                  roomId: 3
                }
              ]
            });
          }
        });

        // Add room filter
        var roomFilterEls = document.querySelectorAll('.room-filter');
        roomFilterEls.forEach(function(roomFilterEl) {
          roomFilterEl.addEventListener('click', function() {
            var roomId = roomFilterEl.dataset.roomId;
            calendar.getEvents().forEach(function(event) {
              if (event.extendedProps.roomId !== parseInt(roomId)) {
                event.remove();
              }
            });
          });
        });
      });

    </script>
  </head>
  <body>
    <div>
      <label for='date-filter'>Date:</label>
      <input type='date' id='date-filter' />
    </div>
    <div>
      <label>Rooms:</label>
      <button class='room-filter' data-room-id='1'>Room 1</button>
      <button class='room-filter' data-room-id='2'>Room 2</button>
      <button class='room-filter' data-room-id='3'>Room 3</button>
    </div>
    <div id='calendar'></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='utf-8' />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
	<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>

	<script>
	// https://fullcalendar.io/docs/initialize-globals-demo
	document.addEventListener('DOMContentLoaded', function() {
	var calendarEl = document.getElementById('calendar');
	var calendar = new FullCalendar.Calendar(calendarEl, {
	initialView: 'dayGridMonth',
	headerToolbar: {
	left: 'prev,next today',
	center: 'title',
	right: 'dayGridMonth,timeGridWeek,timeGridDay'
	},
	events: [
	{
	title: 'Event 1',
	start: '2023-03-22',
	roomId: 1,
	id: 1,
	status: 'confirmed'
	},
	{
	title: 'Event 2',
	start: '2023-03-24',
	end: '2023-03-26',
	roomId: 2,
	id: 2,
	status: 'pending'
	},
	{
	title: 'Event 3',
	start: '2023-03-25',
	end: '2023-03-27',
	roomId: 3,
	id: 2,
	status: 'cancelled'
	}
	],
	eventClick: function(info) {
	window.location.href = 'http://localhost:8069/@/appointment/' + info.event.id;
	},
	eventContent: function(info) {
	var status = info.event.extendedProps.status;
	var backgroundColor = '';
	var textColor = '';
	if (status === 'confirmed') {
	backgroundColor = 'green';
	textColor = 'white';
	} else if (status === 'pending') {
	backgroundColor = 'yellow';
	textColor = 'black';
	} else if (status === 'cancelled') {
	backgroundColor = 'red';
	textColor = 'white';
	}
	return {
	html: '<div style="background-color: ' + backgroundColor + '; color: ' + textColor + '">' + info.event.title + '</div>'
	};
	},
	eventDidMount: function(info) {
	var eventEl = info.el;
	var popover = new bootstrap.Popover(eventEl, {
	title: info.event.title,
	content: 'Event details go here',
	trigger: 'hover',
	placement: 'top',
	container: 'body'
	});
	}
	});
	calendar.render();

	// Add date filter
	var dateFilterEl = document.getElementById('date-filter');
	dateFilterEl.addEventListener('change', function() {
	var dateFilter = dateFilterEl.value;
	if (dateFilter) {
	calendar.getEventSources().forEach(function(eventSource) {
	eventSource.remove();
	});
	calendar.addEventSource({
	events: [
	{
	title: 'Event 1',
	start: dateFilter + 'T09:00:00',
	end: dateFilter + 'T10:00:00',
	roomId: 1
	},
	{
	title: 'Event 2',
	start: dateFilter + 'T11:00:00',
	end: dateFilter + 'T13:00:00',
	roomId: 2
	},
	{
	title: 'Event 3',
	start: dateFilter + 'T14:00:00',
	end: dateFilter + 'T16:00:00',
	roomId: 3
	}
	]
	});
	}
	});

	// Add room filter
	var roomFilterEls = document.querySelectorAll('.room-filter');
	roomFilterEls.forEach(function(roomFilterEl) {
	roomFilterEl.addEventListener('click', function() {
	var roomId = roomFilterEl.dataset.roomId;
	calendar.getEvents().forEach(function(event) {
	if (event.extendedProps.roomId !== parseInt(roomId)) {
	event.remove();
	}
	});
	});
	});
	});

	</script>
	</head>
	<body>
	<div>
	<label for='date-filter'>Date:</label>
	<input type='date' id='date-filter' />
	</div>
	<div>
	<label>Rooms:</label>
	<button class='room-filter' data-room-id='1'>Room 1</button>
	<button class='room-filter' data-room-id='2'>Room 2</button>
	<button class='room-filter' data-room-id='3'>Room 3</button>
	</div>
	<div id='calendar'></div>
	</body>
	</html>