Available in the Full Version
Schedule - Appointment Indicators
This sample demonstrates how to instantiate the igScheduler with appointment indicators.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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>
var recurrence = new $.ig.scheduler.DateRecurrence();
recurrence.frequency($.ig.scheduler.DateRecurrenceFrequency.daily);
recurrence.count(3);
var today = new Date(),
currentYear = today.getFullYear(),
currentMonth = today.getMonth(),
appointments = [{
"resourceId": 1,
"id": 11,
"start": new Date(currentYear, currentMonth, 2, 6, 45),
"end": new Date(currentYear, currentMonth, 3, 6, 45),
"subject": "Marketing conference"
},
{
"resourceId": 6,
"id": 5,
"end": new Date(currentYear, currentMonth, 3, 12, 45),
"start": new Date(currentYear, currentMonth, 3, 13, 45),
"subject": "Dentist appointment"
},
{
"resourceId": 11,
"id": 10,
"start": new Date(currentYear, currentMonth, 4, 8),
"end": new Date(currentYear, currentMonth, 4, 8, 30),
"subject": "Distributions sync",
"description": "Sync with distributions team"
},
{
"resourceId": 2,
"id": 2,
"start": new Date(currentYear, currentMonth, 8, 11),
"end": new Date(currentYear, currentMonth, 8, 12),
"subject": "Company meeting",
"location": "Zero hub hall",
"description": "A company meeting"
},
{
"resourceId": 8,
"id": 7,
"start": new Date(currentYear, currentMonth, 9, 11, 45),
"end": new Date(currentYear, currentMonth, 9, 14, 45),
"subject": "UX training",
"location": "Training hall Dragon",
"description": "Monthly user expirience training"
},
{
"resourceId": 5,
"id": 4,
"start": new Date(currentYear, currentMonth, 10, 5, 45),
"end": new Date(currentYear, currentMonth, 10, 6, 15),
"subject": "Certification exam",
"location": "Exam room 1"
},
{
"resourceId": 7,
"id": 6,
"start": new Date(currentYear, currentMonth, 14, 7, 45),
"end": new Date(currentYear, currentMonth, 16, 7, 45),
"subject": "Web Talks Conference",
"location": "Conference hall Universe",
"description": "A conference about modern web technologies and trends"
},
{
"resourceId": 3,
"id": 32,
"start": new Date(currentYear, currentMonth, 24, 12, 45),
"end": new Date(currentYear, currentMonth, 24, 14, 45),
"subject": "Team Building",
"location": "Hawaii plaza hotel",
"description": "Have a teambuilding with colleges"
}, {
"resourceId": 4,
"id": 3,
"start": new Date(currentYear, currentMonth, 30, 11),
"end": new Date(currentYear, currentMonth, 30, 12),
"subject": "Buisness lunch",
"location": "The Lavender Road",
"description": "Discuss the new rental system with partner"
},
{
"resourceId": 10,
"id": 9,
"start": new Date(currentYear, currentMonth, 19, 9, 45),
"end": new Date(currentYear, currentMonth, 19, 9, 55),
"subject": "Morning Yoga class",
"location": "Training room life"
},
{
"resourceId": 9,
"id": 8,
"start": new Date(currentYear, currentMonth, 25, 13, 15),
"end": new Date(currentYear, currentMonth, 25, 16, 15),
"subject": "Release review",
"location": "Conference room Unity",
"description": "Release review sync"
}, {
"id": 11,
"start": new Date(currentYear, currentMonth, 26, 10, 45),
"end": new Date(currentYear, currentMonth, 26, 12, 45),
"subject": "Interview",
"location": "Guest room 1",
"description": "Interview the candidate for Principal Program Agent"
}
],
resources = [
{
id: 1,
displayName: "Trina Friesen"
},
{
id: 2,
displayName: "Mack Koch"
},
{
id: 3,
displayName: "Burney O'Kon"
},
{
id: 4,
displayName: "Dawson Rohan"
},
{
id: 5,
displayName: "Cain Schmidt"
},
{
id: 6,
displayName: "Jesenia Rogahn"
},
{
id: 7,
displayName: "Tod Heller"
},
{
id: 8,
displayName: "Rhonda Cormier"
},
{
id: 9,
displayName: "Hayden Lockman"
},
{
id: 10,
displayName: "Tierra Witting"
},
{
id: 11,
displayName: "Roderic Considine"
}
],
recurrenceAppointments = [{
"resourceId": 1,
"id": 10,
"start": new Date(currentYear, currentMonth, 4, 8),
"end": new Date(currentYear, currentMonth, 4, 8, 30),
"subject": "Distributions sync",
"description": "Sync with distributions team"
},
{
"resourceId": 2,
"id": 2,
"start": new Date(currentYear, currentMonth, 8, 11),
"end": new Date(currentYear, currentMonth, 8, 12),
"subject": "Company meeting",
"location": "Zero hub hall",
"description": "A company meeting"
},
{
"resourceId": 3,
"id": 7,
"start": new Date(currentYear, currentMonth, 29, 11, 45),
"end": new Date(currentYear, currentMonth, 29, 14, 45),
"subject": "UX training",
"location": "Training hall Dragon",
"description": "Monthly user expirience training"
},
{
"id": 4,
"start": new Date(currentYear, currentMonth, 10, 10, 45),
"end": new Date(currentYear, currentMonth, 10, 12, 45),
"subject": "Mountain trip",
"location": "Pirin",
"description": "",
"resourceId": 8,
"recurrence": "FREQ=DAILY;INTERVAL=1;COUNT=2;WKST=MO"
},
{
"id": 5,
"start": new Date(currentYear, currentMonth, 19, 11),
"end": new Date(currentYear, currentMonth, 19, 11),
"subject": "Bachata Festival",
"location": "Plovdiv",
"description": "",
"resourceId": 7,
"recurrence": recurrence.toICalendarString()
}];