
The jQuery skedTape generates a dynamic, zoomable and scrollable timeline to visualize scheduled events/tasks in a timesheet manner.
Features:
- Allows to adjust the zooming level of the timeline using +/- keys.
- Allows to scroll through the timeline with mouse wheel.
- Allows to show/hide the duration in entries.
- Allows to show/hide the date bar.
- Useful event handlers.
How to use it:
1. Add references to jQuery library and the jQuery skedTape plugin's files.
<link rel="stylesheet" href="jquery.skedTape.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="jquery.skedTape.js"></script>
2. Create an array of events objects containging names, locations, and start/end times.
// helpers function today(hours, minutes) { var date = new Date(); date.setUTCHours(hours, minutes, 0, 0); return date; } function yesterday(hours, minutes) { var date = today(hours, minutes); date.setTime(date.getTime() - 24 * 60 * 60 * 1000); return date; } function tomorrow(hours, minutes) { var date = today(hours, minutes); date.setTime(date.getTime() + 24 * 60 * 60 * 1000); return date; } // events var events = [ { name: 'Meeting 1', location: 'london', start: today(4, 15), end: today(7, 30), url: null, class: '', // extra class disabled: false, // is disabled? data: {}, // data to set with $.data() method userData: {} // custom data }, { name: 'Meeting 2', location: 'london', start: today(7, 30), end: today(9, 15) }, { name: 'Meeting', location: '1', start: today(10, 0), end: today(11, 30) }, // more events here ];
3. Create a location object which will be displayed in the Y axis.
var locations = { '1': 'San Francisco', '2': 'Sydney', '3': 'New York', 'london': 'London', '5': 'Copenhagen', '6': 'Berlin' };
4. Render the schedule timeline on the webpage.
<div id="container"> ... </div>
var mySchedule = $('#container').skedTape({ caption: 'Cities', start: yesterday(22, 0), end: today(12, 0), showEventTime: true, showEventDuration: true, scrollWithYWheel: true, locations: locations, events: events, formatters: { date: function (date) { return $.fn.skedTape.format.date(date, 'l', '.'); }, duration: function (start, end, opts) { return $.fn.skedTape.format.duration(start, end, { hrs: 'ч.', min: 'мин.' });; }, } });
5. Options and defaults.
/** * caption text */ caption: '', /** * Max zoom level */ maxZoom: 10, /** * Default zooming up and down increment/decrement value. */ zoomStep: 0.5, /** * Initial zoom level. Minimum possible value is 1. */ zoom: 1, /** * Whether to show from-to dates in entries. */ showEventTime: false, /** * Whether to show duration in entries. */ showEventDuration: false, /** * Whether to show dates bar. */ showDates: true, /** * Minimum gap between entries to show minutes. */ minGapTime: 1 * MS_PER_MINUTE, /** * Maximum gap between entries to show minutes. */ maxGapTime: 30 * MS_PER_MINUTE, /** * Minimum gap to DO NOT highlight adjacent entries. */ minGapHiTime: false, /** * Enables horizontal timeline scrolling with vertical mouse wheel. */ scrollWithYWheel: false
6. Event handlers available.
/* props: detail.locationId detail.date Click position converted to datetime on timeline. relatedTarget pageX, offsetX, etc */ mySchedule.on('skedtape:event:click', function(e) { // on click }); mySchedule.on('skedtape:event:contextmenu', function(e) { // on right click }); mySchedule.on('skedtape:timeline:click', function(e) { // on timeline click });
This awesome jQuery plugin is developed by lexkrstn. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 31.07.2018
- Source