Making a clickable calendar with ListView

[Yngve]

Hey,

 

We're trying to implement a clickable calendar view. The idea is that a user can see a month as a grid with each grid element representing a day. And each day can contain a record (or several) of their work that day ; i.e. that they worked from 08-16 that day . We would like that when the user clicks on a day, it would open a list of their records for that day (right below the day they clicked, so that the calendar would "split in two" in order for the list to be placed just below the day.

I attached a picture for reference. Is this something that would be possible the ListView component? I can imagine the calendar wouldn't be much of an issue to make, but I'm more uncertain if it's possible to show the list (when clicking a day) in the manner described. 

 

 

 

[Stefan]

Hello, Yngve,

In general, the scenarios seem achievable with the ListView. Please have in mind that the ListView is only providing the opting to list multiple items from a data source and styles them based on the template. This means that all of the stylings and functionalities on click should be programmatically added and adjusted.

For the details functionality, it can be achieved by attaching a click event handler for the element, and based on the selected target to retrieve the information of that day using the dataItem method of the ListView:

http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#methods-dataItem

Then the data can be shown in a Window or a specific container which will be shown only on click.

Also, we have a Scheduler which is designed to provide more built-in functionalities for building a tool for showing events on a Calendar:

http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/overview

http://demos.telerik.com/kendo-ui/scheduler/index

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Yngve]

Hi again,

 

Thanks for the reply. Most of the work went fine, but I'm still having problems with showing the records below the day they belong to. Currently I'm only able to show it below the calendar grid or in a modal window. Any further thoughts on how I can achieve this? We really want it to be below the chosen day. 

[Stefan]

Hello, Yngve,

I`m glad to hear that most of the functionalities are implemented.

For the last requirement, I can suggest once a day is clicked, to take a reference to the DOM element, it can be done by attaching click handlers to all DOM elements used or showing a date. This can be done on the dataBound event using the class of the date container:

https://docs.telerik.com/kendo-ui/api/javascript/ui/listview#events-dataBound

Then once the element is located in the DOM to place a DIV container under the date container. Then if another date is clicked, to remove the previous container and to add the new one. Depending on the scenario "insert" or "append" can be used. Please have in mind that this will require custom logic to determine how the element can be inserted and additional styles for positioning as well.

Also, I can recommend our Professional Service team, which can assist with implementing the desired feature:

https://www.progress.com/services/outsourcing/feature-customization

Regards,
Stefan
Progress Telerik