Skip to content

Commit 4a55850

Browse files
github-actions[bot]KB Bottodorarabadzhiev
authored
Added new kb article adding-calendar-to-telerik-report (#1774)
* Added new kb article adding-calendar-to-telerik-report * Update adding-calendar-to-telerik-report.md * Update adding-calendar-to-telerik-report.md * Add files via upload * Update adding-calendar-to-telerik-report.md * Update adding-calendar-to-telerik-report.md * Add files via upload * Update adding-calendar-to-telerik-report.md * Update adding-calendar-to-telerik-report.md * Update adding-calendar-to-telerik-report.md --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: Todor Arabadzhiev <[email protected]> Co-authored-by: Todor Arabadzhiev <[email protected]>
1 parent b1ba2b8 commit 4a55850

File tree

3 files changed

+62
-0
lines changed

3 files changed

+62
-0
lines changed
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Create a Calendar with Telerik Report Designer
3+
description: Learn how to add a calendar to Telerik Report using List items.
4+
type: how-to
5+
page_title: Creating Calendars in Telerik Report
6+
meta_title: Creating Calendars in Telerik Report
7+
slug: adding-calendar-to-telerik-report
8+
tags: reporting, list, calendar, multicolumn
9+
res_type: kb
10+
ticketid: 1695126
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td> Product </td>
18+
<td> Reporting </td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
I need to create a calendar within a Telerik Report that visually represents special days like Holidays.
26+
27+
## Solution
28+
29+
To generate a calendar layout in Telerik Report, use a **List** item with the approach described in the KB article [Multi-Column Report - Across the Page and Then Down]({%slug how-to-create-multi-column-report---across-the-page-and-then-down%}). Each cell represents a day, with weeks laid out as rows.
30+
31+
Additionally, you may create an outer grid with the Months of the Year using the same approach and an outer List, whose detail section will host the Months.
32+
33+
### Using a List for a single Month Calendar
34+
35+
1. Use a [List item](https://docs.telerik.com/reporting/knowledge-base/how-to-create-multi-column-report---across-the-page-and-then-down) to create a calendar layout.
36+
1. Set the number of columns to 7 (days in a week).
37+
1. Use the **Bindings** feature to dynamically change the text and background color for selected days.
38+
1. Add a new parent Row Group (Outside Group > Above) to the List for a Row Header with the Weekday names.
39+
1. Use the following expression to set the weekday headers starting with Monday. You may change it accordingly if you prefer the Calendar to start with Sunday or another day:
40+
41+
= Switch(Fields.Index % 7, 0, "Mon", 1, "Tue", 2, "Wed", 3, "Thu", 4, "Fri", 5, "Sat", "Sun")
42+
43+
Here is a sample of how the January 2025 calendar looks:
44+
45+
![Monthly calendar for January 2025 achieved with a List in Telerik Reporting](images/January.png)
46+
47+
### Using an outer List for a Year Calendar
48+
49+
1. Place the calendar list inside an outer list detail Panel and apply the same 'across and then down' approach for the outer list. Set the number of columns as preferred. For example, if you want three months horizontally and four vertically, the number of columns should be 3.
50+
1. Use Panels on the sides and below the Month list to ensure the months in the Year calendar are separated.
51+
1. If you want to show also the Month names, you should add a middle List between the Month and Year lists.
52+
* The detail section should contain both the Month list with its side panels, and above it the Month name in a TextBox or HtmlTextBox.
53+
* The TextBox/HtmlTextBox with the month name should be docked to the top of its parent Panel. This ensures the month name will be displayed above the whole week.
54+
55+
This is the whole 2025 calendar created with the above approach. You may download the demo report [Calendar.trdx](https://github.com/telerik/reporting-samples/blob/master/Sample%20Reports/Calendar.trdx) from the reporting-samples repo:
56+
57+
![Calendar for the year 2025 achieved with nested Lists in Telerik Reporting](images/Calendar-2025.png)
58+
59+
## See Also
60+
61+
* [Multi-Column Report Example](https://docs.telerik.com/reporting/knowledge-base/how-to-create-multi-column-report---across-the-page-and-then-down)
62+
* [Expressions and Bindings](https://docs.telerik.com/reporting/designing-reports/connecting-to-data/expressions/using-expressions/bindings)
60.5 KB
Loading

knowledge-base/images/January.png

6.22 KB
Loading

0 commit comments

Comments
 (0)