C1FlexGrid as date calendar

Posted by: wknauf on 15 September 2023, 9:01 am EST

  • Posted 15 September 2023, 9:01 am EST - Updated 15 September 2023, 9:06 am EST

    I proudly present a C1FlexGrid that is used as a calendar (rows for the months of a year, each row contains the days of the month) and provides an enhanced selection:

    FlexSelection.zip

    A simple selection range is inside a month:

    It gets interesting when selecting a range from a date in one month to the date in another month, with a column gap between:

    You can also select a range including a full month:

    To make it more complicated: you can also create selection ranges by starting at the end date and dragging the selection range above to the start cell.

    This all is achieved by tricking the C1FlexGrid rendering: “IsCellHighlighted” is overridden and returns true for all selected date cells. Internally, the “C1FlexGrid.Selection” might contain completely different//inverse ranges. But “Row/Col” and “RowSel/ColSel” provide the relevant information.

    To make the grid compatible with C1Themes, the sample also overrides “IsCellSelectedColumnHeader”: the column headers shall be rendered as “Selected” whenever a corresponding date is selected.

    Hope someone finds this helpful ;-).

    I think I will add it to my github samples collection soon.

    Best regards

    Wolfgang

  • Posted 18 September 2023, 8:40 am EST

    Hi Wolfgang,

    Thank you very much for posting your implementation in the forums. The use-case appears to be good, and your code functions flawlessly ;-). This will undoubtedly help other C1FlexGrid users as well.

    Best Regards,

    Kartik

  • Posted 18 September 2023, 4:11 pm EST

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels