Available in the Full Version

Schedule - Day and Week View Settings

igScheduler can be configured in Day view and Week view modes.
Today
April 2025
Month
Agenda
Week
Day
31
31
31
Wednesday
Wy
>
5

This sample is designed for a larger screen size.

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

When using Week View, the days could be displayed in different states, as for the Day View, it is possible to specify settings like time slot intervals and displayed number of days.

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: "100%",
				agendaViewSettings: {
					dateRangeInterval: 10
				},
                weekViewSettings: {
                    timeSlotInterval: "fiveMinutes",
                    weekViewDisplayMode: "workingDaysOnly"
                },
                dayViewSettings: {
                    timeSlotInterval: "tenMinutes",
                    dayViewNumberOfDays: "3",
                },
				selectedDate: today,
                dataSource: appointments,
                resources: resources
			});
		});
    </script>

</body>
</html>