Scribd
Upload
81 views

HTML5 Event Calendar - Scheduler

HTML5

Uploaded by

Leonardo Forero
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
81 views

HTML5 Event Calendar - Scheduler

HTML5

Uploaded by

Leonardo Forero
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 30
HTMLS Event Calendar/Scheduler De space Weekly HTMLS event calendar with CSS themes, drag and drop support, date navigator. PHP and ASP.NET Core REST API backends. In this article, we build a simple HTMLS event calendar web application. The client-side (HTMLS5/JavaScript) part is universal. We use sample PHP and ASP.NET Core backends. This article looks at changing calendar date using a date picker (on left side), drag and drop event creating, moving and resizing, changing look in a single click using a CSS theme, PHP backend, and ASP.NET Core backend (REST API). Download sample project for PHP - 69 KB Download sample project for ASP.NET Core (.NET 7) - 80 KB Download DayPilot Lite for JavaScript 2023.2 Event Calendar (Open-Source) [javascript.daypilot.org] ‘Online demo [javascript.daypilot.org] sunday ‘Monday Tuesday | Wednesday | Thursday Frida gy Event 1 10" Event 3 Event 2 Ww Event 4 12 ™ 20 3™ In this article, we will build a simple HTMLS/JavaScript event calendar web application. The client-side part is universal. We will use sample PHP and ASP.NET Core backends. Features: ‘* Weekly HTMLS event calendar/scheduler © Changing the calendar using a date navigator (on the left side) * Drag and drop event creating, moving and resizing ‘© Changing the look in a single click using a CSS theme © PHP REST backend * ASP.NET Core REST backend (.NET 7, Entity Framework) We will use the open-source DayPilot Lite for JavaScript Gavascript.daypilot.org] to build the event calendar. DayPilot Lite for JavaScript is available under Apache License 2.0. New Feature: Day/Week/Month Calendar Views Switching su 28 " 18 25 Su 16 2 29 R 9 26 0 7 24 June 2023 Tu We Th 30031 1 G2] 8 1D i is 2 2 2 27 28 29 July 2023 Tu We Th 45 6 iW i 1 8 19 20 25 26 27 Fe 4 a Day Week Month 6/4/2023 6/5/2023 | 6/6/2023, Since version 2023.2, DayPilot includes a helper for easy switching between the defined views (day/week/month/custom), with an integrated date picker (the view is synchronized with the date picker selection), ‘See more in the following tutorial: © Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL) New Feature: Configurator App with Live Preview Weekly Calendar UI Builder Preview Config Events 4 Download 6/4/2023 6/5/2023 6/6/2023 6/7/2023 6/8/2023 6/ ou Event 1 10™ Event 2 Ww 12™ Now you can easily configure the daily/weekly and monthly calendar components using an online Ul Builder app that lets you preview the configuration changes in a live DayPilot instance and generate a new project with a preconfigured calendar component (JavaScript/HTML, JavaScript/NPM, TypeScript, Angular, React and Vue project targets are supported) * Daily/Weekly Calendar U! Builder * Monthly Calendar UI Builder Step 1: Event Calendar JavaScript Library Include daypilot-all. mins. No other dependencies are required for the basic look (the default CSS theme is embedded). HTML Step 2: Event Calendar Placeholder Add a placeholder
to the HTMLS page: HTML dp" >
Step 3: Initialize the Scheduler Initialize the scheduler using Daypilot .calendar class: HTML These simple steps will render an empty scheduler: 772022 | 7/18/2022 | 7/19/2022 | 7/20/2022 7/21/2022 7/22/20 Q™ Ops We 2 1™ 2 Step 4: Load Data ‘We will load the data to the event calendar using a simple HTTP call: JavaScript async function loadEvents() { const start = dp.visibleStart(); const end = dp.visibletnd(); // in .NET, use "/api/CaLendarévents?start=$ {start }eend=${end)" const {data} = await DayPilot.Http.get(“backend_events. php?start=${start }&end=$(end) ); dp-update({ events: data Ys Since version 2018.2.232, you can also use a built-in shortcut method to load events: JavaScript function loadEvents() { // in .NET, use “api/CatendarEvents” dp.events.load("backend_events.php"); + You can detect the currently-visible date range using visibleStart() and visibletnd() methods. The events.load() method adds the start and end to the URL query string automatically. The backend event php endpoint returns the calendar event data in the following format: JavaScript :"2@23-02-25T1@: 38:00", 2023-02-25T16: 30:00 “2, "text":"Calendar Event 2", 1"2023-@2-247@9: 00:00", '2023-02-24T14: 30:00 "3", "text": "Calendar Event 3", “start” :"2023-02-27112:00:00 end” :"2@23-@2-27116:00:00 y 1 PHP backend (backend_events.php): PHP prepare("SELECT * FROM events WHERE NOT ((end rend))")s $stmt->bindParam(':start’, $_GET['start']); $stmt->bindParam(':end", $_GET['end"}); $stmt->execute()5 $result = $stmt->fetchAll(); class Event {} $events = array(); foreach($result as $row) { $e = new Event(); $e-rid = Srow['id']; $e->text = $row ‘name"]; $e-rstart = $row[ ‘start’ ]; $e-rend = Srow[*end']5 $events[] = $e; } echo json_encode($events) ; > ASP.NET Core backend (CalendarEventsController.cs) c# rstart) OR (start >= // GET: api/Catendarévents [HttpGet] public async Task>> GetEvents([FromQuery] DateTime start, [FromQuery] DateTime end) { return await context. Events sWhere(e => 1((e,End <= start) || (e.Start >= end))) -ToListAsync()5 Read more about loading the calendar event data [doc.daypilot.org]. Step 5: Event Moving sunday Monday Tuesday Wednesday tt ow 10" ps lila 12 Event 2 Event a 2™ Bp la The drag and drop user actions (selecting a time range, event moving, event resizing) are enabled by default in the scheduler. We just need to add custom handler to submit the changes to the server side using an AJAX call JavaScript event handler (for PHP): JavaScript const dp = new DayPilot.Calendar("dp", { Wve onéventMoved: async (args) => { const data = { id: args.e.id(), newsStart: args-newstart, newEnd: args.newEnd, await DayPilot.Http.post(*backend_move.php”, data); console.log("The calendar event was moved. + Ys PHP backend (backend_move.php): PHP. prepare($insert); $stmt->bindParam(':start', $params->newStart); $stnt->bindParam(':end', $params->newEnd) ; $stmt->bindParam(’:id’, $params->id); $stmt->execute(); class Result {} $response = new Result(); $response->result = OK"; Sresponse->message = ‘Update was successful’; header( ‘Content-Type: application/ json’); echo json_encode(Sresponse); JavaScript event handler (for ASP.NET Core): JavaScript const dp = new DayPilot.calendar("dp' MW. onEventMoved: async (args) => ( const id = args.e.id(); const data = { id: args.e.id(), start: args.newStart, end: args.newend, text: args.e.text() u await DayPilot.Http.put(~ /api/Calendarevents/${id}’, data); console.log("The calendar event was moved."); } Ds ASP.NET Core backend (CalendarEventsController.cs): cH // PUT: api/CaLendarévents/5 [HttpPut("{id}")] public async Task PutCalendarévent(int id, Calendar€vent calendarEvent) t if (id I= calendarevent.1d) t + return BadRequest(); _context.Entry(calendarévent).State = EntityState.Modified; try t await _context.SaveChangesAsync(); ? catch (DbUpdateConcurrencyException) { Af (ICalendareventexists(id)) t return NotFound(); } else t throw; } } return NoContent(); Read more about drag and drop event moving [doc.daypilotorg]. Step 6: Event Editing You can use DayPilot Modal dialog to edit the events details. DayPilot Modal is an open-source library for building modal forms from code (online Modal Dialog Builder application for visual modal dialog design is also available). First, we add an onEventClick event handler that is fired when users click an existing event. Our modal dialog will have just a single form field (text value called "Name" JavaScript const form = [ {name: "Name", id: i text") Now we can open the modal dialog using DayPilot.Modal.form() method. The second parameter specifies the source data object. The data object will be used to fill the initial values (the id value of the form item specifies the property/field of the data object) The DayPilot Modal. form() method returns a promise, That means we can use the await syntax to for the result and simplify the code: JavaScript const modal = await DayPilot.Modal.form(form, args.e.data); if (modal.canceled) { returns } The result is available as modal.result object. It's a copy of the original object, with the updated values applied. This is our onEventClick event handler: JavaScript const dp = new DayPilot.Calendar("dp", { async (args) => { c {nane: "Name", i ii "eext"} const modal = await DayPilot.Modal.form(form, args.e.data); if (modal.canceled) { return} + // PHP const data = { id: args.e.id(), text: modal result.text oH await DayPilot.Http.post(*backend_update. php’, data); U1 NET 7 i const id = args.e.id(); const data = { id: args.e.id(), start: args.e.start(), end: args.e.end(), text: modal.result.text b await DayPilot.Http.put(*/api/Calendarévents/${id}’, data); ” dp.events .update({ ---args.e.data, text: modal.result.text D5 console.log("The calendar event was updated.”); } Ds PHP backend (backend_update.php): PHP prepare($insert); $stmt->bindParam(':text', $params->text); $stmt->execute(); class Result {} Sresponse = new Result(); $response->result = 'OK'; $response->message = ‘Update successful’; header( ‘Content-Type: application/json'); echo json_encode($response) ; Step 7: Apply the CSS Theme ‘16/2021 er7f202i 6/2023 69/2021 gay 10”) Ais 125 1 If you want to use a custom CSS theme, you need to include the stylesheet: HTML const dp = new DayPilot.Calendar("dp' : "Week", ‘calendar_transparent” dp.init(); You can choose one of the included CSS themes or you can create your own using the online CSS. theme designer. Scheduler CSS Themes DayPilot Lite for JavaScript comes with several pre-built CSS themes. You can create your own theme using the online CSS theme designer [themes.daypilot.org]. Default CSS Theme 12/4/2022 12/5/2022 12/6/2022 27/2022 12/8/2022 a 10" Wu 12™ 1 2™ 3 Event 2 Green CSS Theme ees Traditional CSS Theme Transparent CSS Theme teyajaone | 12/5/2022 | 12/6/2022 | 12/7/2022 | 12/8/2022 White CSS Theme Monthly Event Calendar DayPilot also includes a monthly event calendar view. The API of the monthly view control uses the same design as the daily/weekly calendar: HTML
Event Calendar Localization Select locale: |de-de ¥ Montag Dienstag Mittwoch, Donnerstag) 9° 10” 1° 2 13” 14” You can switch the event calendar locale easily using . locale property: HTML The calendar includes built-in support for many following locales [api.daypil You can also create and register your own locale: JavaScript DayPilot. Locale.register( new DayPilot.Locale(‘en-us", { ‘dayNanes’ :[ ‘Sunday’ , ‘Monday’, ‘Tuesday’ , ‘Wednesday’, "Thursday", ‘Friday’, ‘Saturday’ ], "dayNamesShort':['Su','No','Tu','We','Th','Fr','Sa"], *monthNames*:["January', ‘February’, ‘March’, ‘April’, ‘May, “June’, "July", ‘August, 'September’ , ‘October, ‘November ', ‘Decenber'], *monthNamesShort':[‘Jan‘,'Feb','Nar", ‘Apr’, ‘May’, "Jun’ “dul', Aug’, "Sep", Oct", Nov", "Dec" J, “timePattern’ :*h:mm tt", ‘datePattern’ :'N/d/yyyy", “dateTimePattern':'M/d/yyyy h:mm tt", “timeFormat' : ‘Clock12Hours' , “weekStarts' t 5 Changing the Scheduler Date using a Date Picker < July 2022 > 7/17/2022 7/18/2022 7/19/2022 Su Mo Tu We Th fr Sa ge 2 30 1 2 304 5 6 7 8 9)| 4Qam Event 1 w 1 2 B 4 15 16 7 18 19 | 20] 21 22 23 yy aw 24 25 26 27 28 29 30 31 12™ August 2022 Su Mo Tu We Th fr Sa ™ 78 9 Wn BB 2™ You can use the DayPilot Navigator date picker control (on the left side in the screenshot above) to change the scheduler dates (the visible week): nav" >
Duration Bar 3/24/2013 3/25/2013 3/26/2013 Ss 11 12" Special event 1" 2a 3H 4am 3/27/2013 Version 1.1 of the DayPilot Lite HTMLS event calendar supports a duration bar (an indicator of real calendar event duration on the left side of the event). It is enabled by default and you can style it using the CSS theme. Event Customization (HTML, CSS) 6/5/2016 6/6/2036 6/7/2016 6/8/2016 reuse rr) Since version 1.3 SP3, DayPilot Lite supports event customization using onBeforetventRender event handler: dp">
You can use it to customize the following properties: backColor barBackColor barcolor barHtidden bordercolor cssClass FontColor html * tooltip PerEEEE Demo: * Event Customization Demo (javascript.daypilot.org] Monthly Calendar Event Customization sunday Monday Tuesday Wednesday 27 28 March 1 Fl eee eee Event customization support was added to the monthly calendar control in DayPilot Lite for JavaScript 1.3 SPA, DayPilot Month supports customization of the following event properties: backcolor * bordercolor # cssClass # FontColor # htm ¥ tooltip Demo: ‘© Monthly Calendar Event Customization Demo javascript. daypilot.org] Example: HTML
Support for Angular, React, and Vue Version 2022.1 of DayPilot Lite includes support for Angular, React, and Vue frameworks. See the following tutorials for a quick introduction and a sample project download: ‘Angular Calendar: Day/Week/Month Views (Open-Source) [code.daypilot.org] * React Weekly Calendar Tutorial (Open-Source) [code.daypilot.org] * Vuejs Weekly Calendar Tutorial (Open-Source) [code.daypilot.org] Resource Calendar Room 1 Room 2 Room 3 Room 4 Ro ge Event 2 10™ Event 1 Ww Event 4 12 Event 3 1." 2™ 3™ Since version 2022.2, DayPilot Lite includes a resource calendar view which displays resources as columns. This view lets you schedule events or make reservations for multiple resources and show them side- by-side. Quick example: JavaScript const calendar = new DayPilot.Calendar("calendar", { ViewType: "Resources", columns: [ { name: "RI" Y, { name: "RO" Y,, { name: "RB" }, { name: 3 "RA" }, ] ns calendar.init(); Read more in the resource calendar tutorials for JavaScript, Angular, React and Vue. Icons and Context Menu Pere Pr 10™ rr Be ™ Pr Since version 2022.4, the calendar component supports event context menu and icons. Icons can be added using active areas. Active areas are a universal tool for adding elements to events - you can use them to add images, status icons, action buttons, and drag handles. Example: JavaScript onBeforeEventRende: args.data.areas t ares => { top: 5, right: 5, width: 16, 16, “icons/daypi lot. svg#minichevron-down-4", FontColor: "#666", visibility: "Hover", action: "ContextMenu", style: "background-color: #f9f9F9; border: 1px solid #666; cursor:pointer; border-radius: 15px;" contextMenu: new DayPilot.Menu({ items: [ t text: "Edit...", onClick: args => { app. editEvent (args. source) ; 3 b t text: "Delete", onClick: args => { app.deletefvent (args. source); text: "Duplicate", onClick: args => { app.duplicateevent (args. source) ; + » ] » See Also * DayPilot for JavaScript [javascript .daypilot.org] ‘+ HTMLS Event Calendar (Open-Source) Tutorial [code.daypilot .org] History * June 7, 2023: DayPilot Lite for JavaScript 2023.2.477 released New tutorials: Spring Boot Weekly Event Calendar (Open-Source), Spring Boot Monthly Calendar (Open-Source) ‘* March 20, 2023: DayPilot Lite for JavaScript 2023.1.450 released. New tutorials: ASP.NET Core Weekly Calendar (Open-Source), ASP.NET Core Monthly Calendar (Open-Source) * December 5, 2022: DayPilot Lite for JavaScript 2022.4.438 released New features since the last release: calendar event context menu, icons (a bundle of SVG icons included), updated CSS themes, event active areas. Article updates: CSS theme screenshots, context menu example. ASP.NET Core project uses NET 7. * July 20, 2022: DayPilot Lite for JavaScript 2022.3.398 released. New features since the last release: calendar heightSpec: "BusinessHoursNoScrol1”, resource calendar, calendar column header click event. © April 11, 2022: DayPilot Lite for JavaScript 2022.1.364 released (customizable bar in monthly calendar events, free-hand range selection in date picker component: Angular date picker with drag & drop range selection) * January 26, 2022: DayPilot Lite for JavaScript 2022.1.355 released (built-in XSS attack protection, delete icons for the monthly calendar, cell header click event for the monthly calendar); sample project upgraded to NET 6 * December 28, 2021: DayPilot Lite for JavaScript 2021.4.341 released: Angular, React and Vue Calendar component support, extended date picker (Navigator component) ‘© June 2, 2021: DayPilot Lite for JavaScript 2021.2.261 released; updated to ES6 syntax; event editing section added * January 18, 2021: DayPilot Lite for JavaScript 2021.1.248 released; ASP.NET Core backend (.NET 5, Entity Framework); jQuery dependency removed * June 18, 2018: DayPilot Lite for JavaScript 2018.1.232 released (API improvements, event deleting added to the project source code) * February 27, 2018: DayPilot Lite for JavaScript 2018.1.228 released (introduces event deleting) * December 12, 2016: DayPilot Lite for JavaScript 1.3 SP5 released; Navigator CSS styling improved ‘* August 24, 2016: DayPilot Lite for JavaScript 1.3 SP4 released; includes support for monthly calendar event customization ‘* June 6, 2016: DayPilot Lite for JavaScript 1.3 SP3 released; event customization example added ‘* April 26, 2016: DayPilot Lite for JavaScript 1.3 SP2 released; AngularJS “controller as" syntax example added ‘+ January 3, 2016: Switching the CSS theme fixed, DayPilot Lite for JavaScript 1.3 SP1 released. The sample project uses the latest DayPilot Lite version. The sample ASP.NET MVC project uses Visual Studio 2015. jQuery section added. Monthly calendar view section added * November 2, 2015: DayPilot Lite for JavaScript 1.3 released. * June 3, 2015: DayPilot Lite for JavaScript 1.2 SP2 released. ‘* March 23, 2015: DayPilot Lite for JavaScript 1.2 SP1 released. Sample projects updated and fixed (drag and drop event resizing) * January 12, 2015: DayPilot Lite for JavaScript 1.2 released, includes AngularJS event calendar plugin, AngularJS monthly calendar plugin ‘* November 10, 2014: Doc links added * July 17, 2014: Navigator code for switching the visible week added ‘+ May 15, 2014: backend_events php code listing fixed ($_PoST instead of $_GET) * April 1, 2014: DayPilot Lite for JavaScript 1.1 SP1 released, localization example added ‘* March 17, 2014: Sample ASP.NET MVCS backend added (download and code listing) © March 13, 2014: DayPilot Lite for JavaScript 1.1 released * February 24, 2014: Initial version License This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0 Written By Dan Letecky us Czech Republic My open-source event calendar/scheduling web UI components: DayPilot for JavaScript, Angular, React and Vue Comments and Discussions 2 81 messages have been posted for this article Visit https://www.codeproject.com/Articles/732679/HTML-Event-Calendar-Scheduler to post and view comments on this article, or click here to get a print view with messages. Permalink Article Copyright 2014 by Dan Letecky Advertise Everything else Copyright © CodeProject, Privacy 1999-2023, Cookies Terms of Use Web01 2.8:2023-05-13:1

You might also like