Schedule Template
November 16, 2016 | 20 Feedbacks

Schedule Template

A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…)
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We’ve come across this web component many times: when we check the schedule of a conference, or the timetable of the classes of our gym. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to create a schedule table. So we built one!

Creating the structure

The HTML structure is composed of three different elements: a div.timeline for the events timeline(09:00, 09:30, ..), a div.events wrapping the events list and a div.event-modal for the modal window used to provide more details about the selected event.

Adding style

On small devices (window width less than 800px), all the events inside an .events-group are lined up horizontally: we set a display: flex to the .events-group > ul element and an overflow-x: scroll to make the events scrollable.

As for the .event-modal, it is has a fixed position and it is moved to the right outside the viewport. When the user selects an event, the .modal-is-open class is used to translate the .event-modal back into the viewport.

On bigger devices, all the events are in absolute position and placed inside a timetable: the top position and the height of each event are evaluated using the data-start and data-end attributes of the event itself and set using JavaScript (more in the Events handling section).

As for the .event-modal, the opening/closing animation is created using jQuery combined with CSS Transitions and Transformations (more in the Events handling section).

Events handling

To implement this event schedule, we created a SchedulePlan object and used the scheduleReset() and initEvents() functions to init the schedule and attach event handlers to the proper elements.

On big devices, the scheduleReset() method takes care of placing the events inside the timetable and set their height. To evaluate the height, for example, we calculate the duration of the event (data-end minus data-start), divide it by the ‘eventUnit’ (in our case it’s 30 minutes) and then multiply it by the height of ‘timeline unit’ (in our case, 50px).

When the user selects an event, the jQuery load() function is used to load the content of the event just selected (its data-content is used to determine the file content to be loaded).
In addition to that, on big devices, the .event-modal is animated to show the event content. First, the .event-modal is placed on top of the selected event and its height and width are changed to be equal to the ones of the selected event; then the .header-bg and .body-bg elements are scaled up to create the morphing animation; at the end of this animation, the modal content is revealed.

One note: we implemented a simple load() function to upload the new html content, but you may wanna replace it with a $.ajax call in order to handle errors, beforeSend request etc. according to your project.

Changelog

Nov 16, 2016
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • http://maclifestyle.pl/ Maciej Buchert

    Maybe add support for Google Maps ? :)

    • http://www.nilpo.com/ Robert Dunham (Nilpo)

      Do you mean Google Calendar? I’m not seeing the connection between a schedule and Google Maps.

      • http://maclifestyle.pl/ Maciej Buchert

        I mean Google Maps. Add small embed map with place where the event is.

        • http://about.me/lauhakari Lauhakari [mikko]

          Well that might just be a task for your to do, so you learn how to ;)

          • http://maclifestyle.pl/ Maciej Buchert

            I know how :) but maybe someone doesn’t know :)

  • http://he.savvy.co.il/blog/ Roee Yossef

    very nice :)

  • https://kimbukedi.com Furkan Acar

    It’s just a how to use modal tutorial, and yes a scheduling app should be clean-designed but not that primitive.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! we try to keep our components as simple as possible. We could embellish them more, but then it would be more difficult for developers to use them.

  • Boba Fett

    Very nice. I made it work . Sort of…..I can get the first part done, but with my limited knowledge I have no idea how to insert the other html files that shows write ups in pop-ups in Weebly framework :(, :(, :(

    • http://codyhouse.co Claudia Romano

      Hi Boba, the data-content of each event is equal to the name of the html file with your content. So make sure this attribute is equal to the name of file you created. Hope this helps!

  • Damir Dizdarević

    love how you solved the mobile view!

  • rjim

    Are you manually entering the events in the index.html file? Or, do you have a front end set up for entering the events. Maybe, I’m just missing something.
    It looks great and I like the nice clean appearance.

    • http://www.nilpo.com/ Robert Dunham (Nilpo)

      rjim, this is just a proof of concept. You’ll need to build an application to add your own functionality.

    • http://haneedesigns.com/ soulstatic

      Just about to ask the same question. You could do this with a host of things. WordPress and some custom fields and/or posts.

  • Bomav1

    Nice, really, really nice! But… I have noted one thing, the “show” animation is smooth and perfect, but the “hide” animation looks not so good, why? Because, it is not smooth, the white block just disappears without any “transition”, maybe it’s better to make some “transition” on white block and reduce the block’s width with smooth animation? (from the big block to the smaller block)

  • http://www.nilpo.com/ Robert Dunham (Nilpo)

    I would suggest changing your elements to elements. if you were building in app with this, generating UTC times would be trivial and would very quickly allow this to display localized times. You could also use something like Moment.js with ease since it expects the element. Browser support is good in all major browsers, although it isn’t much of a concern since it will fallback to an inline element anyway and your is only being used for layout.

  • Talia

    Great code, I’m just confused when it comes to inserting additional info into modal window. Could someone explain how to do it? Would be really grateful :)

  • William Ode

    How can I add route management ?

  • Glenn Hooton

    It’s nice but buggy. If you add more time elements e.g. 19:00 the vertical lines don’t come down to those. Also if you have empty day elements e.g. Tuesday the vertical lines don’t appear.