Available in the Full Version

Schedule - Appointment Indicators

This sample demonstrates how to instantiate the igScheduler with appointment indicators.
Today
April 2025
Month
Agenda
Tuesday, April 01, 2025
all-day
all-day
Subject
Location
31
31
31
Wednesday
>
1
6:45 AM
Marketing conference
Wednesday, April 02, 2025

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

When scheduler width is less than 768 pixels the appointment subjects are automatically replaced with square indicators, showing only colors of the associated resources.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!--<meta http-equiv="x-ua-compatible" content="IE=9">-->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.scheduler-bundled.js"></script>
	<script src="/data-files/scheduler-data.js"></script>
</head>
<body>
    <div id="scheduler"></div>
    <script>
		$( function () {
			$("#scheduler").igScheduler({
				height: "650px",
                width: "760px",
                views: ["monthView", "agendaView"],
				monthViewSettings: {
					isAgendaVisible: true
				},
				selectedDate: today,
                dataSource: appointments,
                resources: resources
			});
        });
    </script>

</body>
</html>