jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
164 lines (152 loc) • 7.55 kB
HTML
<html lang="en">
<head>
<title id='Description'>Scheduler Custom Element DefaultFunctionality</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of Custom Element Scheduler." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdate.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscheduler.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscheduler.api.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
var appointments = new Array();
var appointment1 = {
id: 'id1',
description: 'George brings projector for presentations.',
location: '',
subject: 'Quarterly Project Review Meeting',
calendar: 'Room 1',
start: new Date(2018, 10, 23, 9, 0, 0),
end: new Date(2018, 10, 23, 16, 0, 0)
}
var appointment2 = {
id: 'id2',
description: '',
location: '',
subject: 'IT Group Mtg.',
calendar: 'Room 2',
start: new Date(2018, 10, 24, 10, 0, 0),
end: new Date(2018, 10, 24, 15, 0, 0)
}
var appointment3 = {
id: 'id3',
description: '',
location: '',
subject: 'Course Social Media',
calendar: 'Room 3',
start: new Date(2018, 10, 27, 11, 0, 0),
end: new Date(2018, 10, 27, 13, 0, 0)
}
var appointment4 = {
id: 'id4',
description: '',
location: '',
subject: 'New Projects Planning',
calendar: 'Room 2',
start: new Date(2018, 10, 23, 16, 0, 0),
end: new Date(2018, 10, 23, 18, 0, 0)
}
var appointment5 = {
id: 'id5',
description: '',
location: '',
subject: 'Interview with James',
calendar: 'Room 1',
start: new Date(2018, 10, 25, 15, 0, 0),
end: new Date(2018, 10, 25, 17, 0, 0)
}
var appointment6 = {
id: 'id6',
description: '',
location: '',
subject: 'Interview with Nancy',
calendar: 'Room 4',
start: new Date(2018, 10, 26, 14, 0, 0),
end: new Date(2018, 10, 26, 16, 0, 0)
}
appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);
var source =
{
dataType: 'array',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'location', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date' },
{ name: 'end', type: 'date' }
],
id: 'id',
localData: appointments
};
JQXElements.settings['schedulerSettings'] = {
date: new jqx.date(2018, 11, 23),
width: 850,
height: 600,
source: new jqx.dataAdapter(source),
view: 'weekView',
showLegend: true,
ready: function() {
var myScheduler = document.querySelector('jqx-scheduler');
myScheduler.ensureAppointmentVisible('id1');
},
resources:
{
colorScheme: 'scheme05',
dataField: 'calendar',
source: new jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: 'start',
to: 'end',
id: 'id',
description: 'description',
location: 'location',
subject: 'subject',
resourceId: 'calendar'
},
views:
[
'dayView',
'weekView',
'monthView'
]
}
</script>
</head>
<body>
<div class="example-description">
This is an example of Custom element Scheduler. The Scheduler component for Custom element is very powerful and enables you to set appointments by hour and date. It supports day, week and month timelines. There is an easily accessible calendar which you can use in order to set the appointments. The Agenda view is very convenient to see all the events in a given day. The events can be customized and can have different colors. All the appointment properties can be changed through the API of the scheduler. You can also enable recurring appointments. One extra feature is that you can see the time conveniently in the different time zones. The rows height can be configured and the ruler can be hidden. You can also set to see the week numbers on the left. Creating new appointments can be done with a context menu. The width of the columns can be customized.
</div>
<jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
</body>
</html>