Making a clickable calendar with ListView

2 posts, 0 answers
  1. Yngve
    Yngve avatar
    18 posts
    Member since:
    Feb 2017

    Posted 26 Sep Link to this post



    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. 




  2. Stefan
    Stefan avatar
    1147 posts

    Posted 28 Sep Link to this post

    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:

    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:

    I hope this is helpful.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top