製品版のみの機能
スケジュール - 日表示および週表示の設定
igScheduler を日表示または週表示のモードに設定できます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
週表示で日ごとの状態を構成できます。日表示の場合、時間帯の間隔または表示する日数などの設定を指定できます。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--<meta http-equiv="x-ua-compatible" content="IE=9">-->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>
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()
}];