time table

Schedule Template

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!

👋 A new version of this component is available. Download now →.

Creating the structure

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

⚠️ Note: if you want to change the timeline hours (e.g., add events after the 18:00), make sure to:

• Create a new list item (with your new time) in the .cd-schedule__timeline ;
• Update the —schedule-rows-number css variable inside the style.scss file (for example, if you add a new slot — 18:30 — change the —schedule-rows-number value from 19 to 20).

Adding style

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

.cd-schedule__group > ul < position: relative; padding: 0 var(--component-padding); display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; >.cd-schedule__event < flex-shrink: 0; // force them to stay on one line float: left; // flex fallback height: 150px; width: 70%; max-width: 300px; >

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

.cd-schedule-modal < position: fixed; z-index: 3; top: 0; right: 0; height: 100%; width: 100%; visibility: hidden; transform: translateX(100%); transition: transform .4s, visibility .4s; >.cd-schedule-modal--open < // this class is added as soon as an event is selected transform: translateX(0); visibility: visible; >

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).

.js < @include breakpoint(md) < .cd-schedule__events < width: 100%; >ul < display: flex; flex-wrap: nowrap; >> .cd-schedule__group < flex-basis: 0; flex-grow: 1; >.cd-schedule__event < position: absolute; z-index: 3; width: calc(100% + 2px); // top position and height will be set using js left: -1px; >> >

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

Events handling

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

function ScheduleTemplate( element ) < this.element = element; this.timelineItems = this.element.getElementsByClassName('cd-schedule__timeline')[0].getElementsByTagName('li'); //.. this.singleEvents = this.element.getElementsByClassName('cd-schedule__event'); //.. this.initSchedule(); >; ScheduleTemplate.prototype.initSchedule = function() < this.scheduleReset(); this.initEvents(); >;

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).

ScheduleTemplate.prototype.placeEvents = function() < // on big devices - place events in the template according to their time/day var self = this, slotHeight = this.topInfoElement.offsetHeight; for(var i = 0; i < this.singleEvents.length; i++) < var anchor = this.singleEvents[i].getElementsByTagName('a')[0]; var start = getScheduleTimestamp(anchor.getAttribute('data-start')), duration = getScheduleTimestamp(anchor.getAttribute('data-end')) - start; var eventTop = slotHeight*(start - self.timelineStart)/self.timelineUnitDuration, eventHeight = slotHeight*duration/self.timelineUnitDuration; this.singleEvents[i].setAttribute('style', 'top: '+(eventTop-1)+'px; height: '+(eventHeight +1)+'px'); >>;

When the user selects an event, Ajax 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 .cd-schedule-modal is animated to show the event content.
First, the .cd-schedule-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 .cd-schedule-modal__header-bg and .cd-schedule-modal__body-bg elements are scaled up to create the morphing animation; at the end of this animation, the modal content is revealed.

ScheduleTemplate.prototype.openModal = function(target) < var self = this; var mq = self.mq(); this.animating = true; //update event name and time this.modalEventName.textContent = target.getElementsByTagName('em')[0].textContent; this.modalDate.textContent = target.getAttribute('data-start')+' - '+target.getAttribute('data-end'); this.modal.setAttribute('data-event', target.getAttribute('data-event')); //update event content this.loadEventContent(target.getAttribute('data-content')); Util.addClass(this.modal, 'cd-schedule-modal--open'); if( mq == 'mobile' ) < self.modal.addEventListener('transitionend', function cb()< self.animating = false; self.modal.removeEventListener('transitionend', cb); >); > else < var eventPosition = target.getBoundingClientRect(), eventTop = eventPosition.top, eventLeft = eventPosition.left, eventHeight = target.offsetHeight, eventWidth = target.offsetWidth; var windowWidth = window.innerWidth, windowHeight = window.innerHeight; var modalWidth = ( windowWidth*.8 >self.modalMaxWidth ) ? self.modalMaxWidth : windowWidth*.8, modalHeight = ( windowHeight*.8 > self.modalMaxHeight ) ? self.modalMaxHeight : windowHeight*.8; var modalTranslateX = parseInt((windowWidth - modalWidth)/2 - eventLeft), modalTranslateY = parseInt((windowHeight - modalHeight)/2 - eventTop); var HeaderBgScaleY = modalHeight/eventHeight, BodyBgScaleX = (modalWidth - eventWidth); //change modal height/width and translate it self.modal.setAttribute('style', 'top:'+eventTop+'px;left:'+eventLeft+'px;height:'+modalHeight+'px;width:'+modalWidth+'px;transform: translateY('+modalTranslateY+'px) translateX('+modalTranslateX+'px)'); //set modalHeader width self.modalHeader.setAttribute('style', 'width:'+eventWidth+'px'); //set modalBody left margin self.modalBody.setAttribute('style', 'margin-left:'+eventWidth+'px'); //change modalBodyBg height/width ans scale it self.modalBodyBg.setAttribute('style', 'height:'+eventHeight+'px; width: 1px; transform: scaleY('+HeaderBgScaleY+') scaleX('+BodyBgScaleX+')'); //change modal modalHeaderBg height/width and scale it self.modalHeaderBg.setAttribute('style', 'height: '+eventHeight+'px; width: '+eventWidth+'px; transform: scaleY('+HeaderBgScaleY+')'); self.modalHeaderBg.addEventListener('transitionend', function cb()< //wait for the end of the modalHeaderBg transformation and show the modal content self.animating = false; Util.addClass(self.modal, 'cd-schedule-modal--animation-completed'); self.modalHeaderBg.removeEventListener('transitionend', cb); >); > >;

Note : we implemented a simple Ajax request to upload the new html content, but you may wanna replace it with a complete request (error handling, loader element, ..).

Cookie Compliance

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.

Источник

HTML Code for Designing of Time Table Using TABLE

The following HTML code written with inline CSS styles to make all the program under a single file.

It is a best practice to use separate external style sheet for better control and fast loading of the page, in this article, we given both inline and external CSS styles for writing Time Table using Table.

    
COLLEGE TIME TABLE
   8:30-9:30 9:30-10:30 10:3-11:30 11:30-12:30 12:30-2:00 2:00-3:00 3:00-4:00 4:00-5:00 MONDAY ---SUB1 
SUB2 
SUB3 
L
U
N
C
H SUB4 
SUB5 
counselling class TUESDAY SUB1 
SUB2 
SUB3 
--- SUB4 SUB5 
library WEDNESDAY SUB1 
SUB2 SWA 
---  lab THURSDAY SUB1 
SUB2 
SUB3 --- SUB4 
SUB5 
library FRIDAY SUB1 SUB2 
SUB3 
--- SUB4 
SUB5 
library SATURDAY SUB1 
seminar SUB4 
SUB5 
library   

Let us see more detailed way of writing the same code given below with external style sheet and HTML file.

It is always recommended to use external style sheet, inline style given above is just for understanding the code.

Both index.html and style.css must be in the same folder to get the correct output.

CSS File: the file name is style.css

body < background-color: #ffffff; mix-blend-mode: darken; >header h1 < margin-top: 10%; text-align: center; color: black; font-weight: bold; font-family: sans-serif; >table < margin-top: 2%; width: max-content; border: 1px solid black; height: 300px; margin-left: 23%; >td < text-align: center; border: 1px solid black; >#blank < color: #000; background-color: #fff; >#s < font-weight: 800; text-transform: uppercase; font-family: sans-serif; background-color: #ffffff; >#seminar < font-weight: 800; font-family: sans-serif; background-color: #ffffff; text-transform: uppercase; >#sub < color: black; font-family: sans-serif; font-weight: 400; background-color: #ffffff; >#sub1 < background-color: #fff; >#sub2 < color: black; text-transform: uppercase; background-color: #ffffff; >#sub3 < background-color: #ffffff; font-family: sans-serif; font-weight: 800; >#box1 < color: cornflowerblue; font-family: sans-serif; font-weight: 800; >#box2 < color: darkorange; font-weight: 800; font-family: sans-serif; >#box3 < color: darkviolet; font-weight: 800; font-family: sans-serif; >#box4 < color: green; font-weight: 800; font-family: sans-serif; >#box5 < color: red; font-family: sans-serif; font-weight: 800; >#box6 < color: hotpink; font-weight: 800; font-family: sans-serif; >#box7

HTML Code: the file name is index.html

         
COLLEGE TIME TABLE
 
 
 
 
8:30-9:30
 
9:30-10:30
 
10:30-11:30
 
11:30-12:30
 
12:30-2:00
 
2:00-3:00
 
3:00-4:00
 
4:00-5:00
 
 
 
 
MONDAY
 
---
 
SUB1
 
SUB2
 
SUB3
 
L
U
N
C
H 
SUB4
 
SUB5
 
counselling class
 
 
TUESDAY
 
SUB1
 
SUB2
 
SUB3
 
---
 
SUB2
 
SUB2
 
library
 
 
WEDNESDAY
 
SUB1
 
SUB2
 
SWA
 
---
 
LAB
 
 
THURSDAY
 
SUB1
 
SUB2
 
SUB3
 
---
 
SUB2
 
SUB2
 
library
 
 
FRIDAY
 
SUB1
 
SUB2
 
SUB3
 
---
 
SUB4
 
SUB5
 
library
 
 
SATURDAY
 
SUB1
 
seminar
 
SUB4
 
SUB5
 
library
 
 
 
  

Output for the above code

The above code with external style sheet is contributed by Chanakya.

Источник

HTML Timetable Using CSS Grid (Simple Example)

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

QUICK NOTES

• It is highly recommended that you learn some of the basics of CSS grid before touching on this tutorial, links in the “useful bits” section below.

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

TIMETABLE DEMO

CSS TIMETABLE

All right, let us now get into more details on how the CSS grid timetable works.

PART 1) THE HTML

 
 
 
Morning
 
Afternoon
 
Night
 
Mon
 
Tue
 
Wed
 
Thur
 
Fri
 
Sat
 
Sun
 
 
Walk the Doge.
 
Feed the Doge.
 
Play with Doge.
 
Eat with Doge.
 
Do nothing.
 

This may look like a whole load of complicated HTML at first, but keep calm and look carefully.

• We insert cells into just like a “normal table”.
  • A “normal” blank cell.
  • A “header” cell.
  • A “timetable entry” cell.
  • (A) The first row is for the morning/afternoon/night headers.
  • (B) The following rows are for Monday to Sunday. The first cell is a header, followed by 3 empty ones.
  • (C) The “dynamic” timetable entries are kept at the bottom. Will go through more of this below.

  That’s about it. The “number of rows and columns” are defined in CSS, not HTML.

  PART 2) THE CSS

  2A) BASIC TIMETABLE

  /* (A) WHOLE PAGE */ * < font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; >/* (B) BASIC TIMETABLE */ :root < --row-height: 50px; >#timetable < display: grid; position: relative; /* grid-template-columns: repeat(COLUMNS, WIDTH); */ grid-template-columns: 80px repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--row-height); >

  • #timetable < display: grid >Set to grid layout. Captain Obvious at your service.
  • grid-template-columns: 80px repeat(3, minmax(0, 1fr)) There are 4 columns in this simple example. The first column is fixed to 80px and the rest will auto-resize equally.
  • —row-height: 50px and grid-auto-rows: var(—row-height) Each row will have a height of 50px .

  2B) BLANK & EMPTY CELLS

  /* (C) BLANK & HEADER CELLS */ .cell < display: flex; align-items: center; padding: 10px; height: var(--row-height); border: 1px solid #efefef; >.head

  Next, we deal with the cells themselves. The only essential part here is .cell < height: var(--row-height) >, to ensure that all cells have the same row height as the grid. The rest are cosmetics.

  2C) TIMETABLE ENTRY CELLS

  Lastly, we overlay the timetable entries over existing empty cells. How this is done:

  • #timetable < position: relative >and .entry < position: absolute >is the basic mechanic to overlap the timetable entries over the existing cells.
  • right: 0; left: 0; makes sure that the entry cells retain the “rightful width” that it should have.
  • Finally, use to place the entry cell where it needs to be.
    • • Monday is grid-row: 2 , Tuesday is grid-row: 3 , and so on.
      • To span the entry over morning grid-column: 2/3 , over morning and afternoon grid-column: 2/4 , and so on.

      Yep, that’s all to the “complicated code”.

      EXTRA BITS & LINKS

      That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

      HOW ABOUT A RESPONSIVE TIMETABLE?

      A massive table will probably require a scrollbar to display properly. One simple trick I use is to wrap the timetable into another container – .

      COMPATIBILITY CHECKS

      The required CSS features are already well-supported in all modern browsers.

      LINKS & REFERENCES

      INFOGRAPHIC CHEATSHEET

      

      THE END

      Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

      Leave a Comment Cancel Reply

      Search

      Breakthrough Javascript

      

      Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

      Socials

      About Me

      

      W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

      Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

      Источник

      Designing a Time Table in HTML using TABLE 3 min read

      

      This post covers the time table design in HTML using TABLE.
      Here we will create the time table routine just like the one you had or have in school, designing it, giving it some background color, border but only with the help of HTML.

      HTML code for Time Table

      Output: school time table in html

      

      You can change the design as you want, change the color and practice with it.
      We hope this post on time table design in html helped you.

      MORE

      Find the output ab, cd, ef, g for the input a,b,c,d,e,f,g in Javascript and Python

      In this tutorial, we will write a program to find a pairs of elements from an array such that for the input [a,b,c,d,e,f,g] we will …
      Read More

      String Pattern Programs in C

      In this tutorial, we will write various C pattern programs for String. Before that, you may go through the following topics in C. for loop …
      Read More

      Java Program to Find pair of Integers in Array whose sum is given Number

      In this tutorial, we will write a program to find a pair of elements from an array whose sum equals a given number in java …
      Read More

      Program to Print Diamond Alphabet Patterns in C

      In this tutorial, we will learn to write a C program to print Diamond patterns using alphabets/characters. However, in this tutorial, we will create a …
      Read More

      Half Diamond Pattern in C using Alphabets

      In this tutorial, we will learn and code the half diamond alphabet patterns in C programming language. However, in this tutorial, we will create a …
      Read More

      Half Pyramid of Alphabets in C

      In this tutorial, we will learn and code alphabet patterns in C programming language specifically the Half pyramid of alphabets in C programming. However, in …
      Read More

      Источник