Author: Princu7

The event websites generated by Open Event Webapp can be large in size with a massive number of sessions in it. As such, it becomes a little difficult for the user to keep track of the sessions he is interested in without any bookmark facility.  With the help of it, he/she can easily mark a session as his favorite and then see them all at once at the click of the button. This feature is available and synchronized across all the pages (track, rooms, and schedule) of the event. That is, if you bookmark a session on the tracks page, it would automatically appear on the other pages too. Likewise, if you unmark a session on any of the page, it would be reflected on rest of the pages. The event websites generated by the webapp are static in nature. It means that there is no backend server and database where the data about the bookmarked sessions and the user can be stored. So how are we storing information about the marked sessions and persisting it across different browser sessions? There must be a place where we are storing the data! Yes. It’s the LocalStorage Object. HTML5 introduced a localStorage object for storing information which persists even when the site or the browser is closed and opened again. Also, the max size of the localStorage object is quite sufficient (around 5 - 10 MB) for storing textual data and should not be a bottleneck in the majority of the cases. One very important thing to remember about the localStorage object is that it only supports strings in key and value pairs. Hence, we can’t store any other data type like Boolean, Number or Date directly in it. We would have to convert the concerned object into a string using the JSON.stringify() method and then store it. Okay, let’s see how we implement the bookmark facility of sessions. We initialize the localStorage object. We create a key in it which is the name of the event and corresponding to its value, we store an object which will contain the information about the bookmarked sessions of that particular event. It’s key will be the id of the session and the value (0 or 1) will define whether it is bookmarked or not. Initially, when no sessions have been bookmarked, it will be empty. function initPage() { //Check whether the localStorage object is already instantiated if(localStorage.hasOwnProperty(eventName) === false) { localStorage[eventName] = '{}'; // This object will store the bookmarked sessions info } } Now, we need to actually provide a button to the user for marking the sessions and then link it to the localStorage object. This is the session element with the star-shaped bookmark button Here is the related code <a class="bookmark" id="b{{session_id}}"> <i class="fa fa-star" aria-hidden="true"> </i> </a> Then we need to handle the click event which occurs when the user clicks this button. We will extract the id of the session and then store this info in the event object inside the localStorage object.…

Recently, we implemented a cool feature in the Open Event Webapp. We provided the facility to download the png image of the schedule of an event at the click of a button. The user can download the schedule of an event in both the list and the calendar view. There are situations when the speaker or the organizer of an event want to get a hard-copy of the schedule so that they can paste it on notice boards for the convenience of the visitors. With the help of PNG Export functionality, they can download the png image of the schedule and print it easily. The whole code can be seen here. On the schedule page, the user can view the sessions in two modes: list and the calendar mode. Capturing a portion of the document and then converting it to an image is no easy task. It is because we can’t directly convert an HTML element to an image. We have to first somehow render that HTML element on the canvas and then convert it to an image.It is a two-step process. Rendering an HTML element on the canvas is the most important part and challenging part. The better we will be able to render an element on the canvas, the better will be the output quality of the image. Fortunately for us, we don’t have to implement it from scratch (which would have been extremely difficult and time-consuming). Enter html2canvas library. It renders an element onto the canvas after which we can convert it into an image. I will now explain how we implemented png export in the calendar mode. You can view the whole schedule template file here Here is a screenshot of calendar or grid view of the schedule. Currently selected date is 18th Mar, Saturday. The PNG Export button is on the top-right corner beside the ‘Calendar View’ button. Here is a little excerpt of the basic structure of the calendar mode of the sessions. I have given an overview of it in the comments. <div class="{{slug}} calendar"> <!-- slug represents the currently selected date --> <!-- This div contains all the sessions scheduled on the selected date --> <div class="col-md-12 paddingzero"> <!-- Contain content related to current date and time --> </div> <div class="calendar-content"> <div class="times"> <!-- This div contains the list of all the session times on the current day --> <!-- It is the left most column of the grid view which contains all the times → <div class="time"> <!-- This div contains information about the particular time --> </div> </div> <div class="rooms"> <!-- This div contains all the rooms of an event --> <!-- Each particular room has a set of sessions associated with it on that particular date --> <div class="room"> <!-- This div contains the list of session happening in a particular room --> <!-- Session Details --> </div> </div> </div> </div> Now, let us see how we will actually capture an image of the HTML element shown above. Here is the code related to it: $(".export-png").click(function() {…