Making a clickable calendar with ListView

4 posts, 0 answers
  1. Yngve
    Yngve avatar
    19 posts
    Member since:
    Feb 2017

    Posted 26 Sep 2017 Link to this post

    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. 

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    1878 posts

    Posted 28 Sep 2017 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:

    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
    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.
  3. Yngve
    Yngve avatar
    19 posts
    Member since:
    Feb 2017

    Posted 24 Oct 2017 in reply to Stefan Link to this post

    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. 

  4. Stefan
    Admin
    Stefan avatar
    1878 posts

    Posted 26 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 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