Tool tip and Highlight important days in WPF Calendar

[P r e m k u m a r]

Guys,

I've the below requirement in Calender control.

• Highlight or circle the important days with different colors (eg. public holidays in one color and local holidays in a different color)
• Custom comments for the day should be shown in tool tip (eg. If I've applied leave for the upcoming day  it should be shown in some color (red) and if i place the mouse over it, the reason for the leave should show in tool tip)

I've attached the sample requirement with this article..

Kindly give your hands on the above requirement.

Regards, Prem

 

[Vladi]

Hello Prem,

In order to custom the calendar buttons of the RadCalendar you will need to create a custom DayButtonStyleSelector. You can read this help article about "How to Customize the Calendar Buttons". You can also add your custom Tooltips in that custom selector.

I created and attached a sample project for you with the described approach. Hope this is helpful.

Regards,
Vladi
the Telerik team

[P r e m k u m a r]

Dear Vladi,

Thank you for the reply, this is somewhat pretty and works just fine :)

But now I've performance issue. since the DayButtonStyleSelector is getting loaded for each and every date it takes few seconds(10 sec)  to load the control. if the list (leaveDetailsList)contains more data it will take quite longer time to load the control.

Is there any alternative approach to achieve the same with our performance issue.Basically i'll load one year  data in calendar.

I've created the following class foe DayButtonStyleSelector:

public class DayButtonStyleSelector : System.Windows.Controls.StyleSelector
   {
       public Style SpecialStyleWeekDays { get; set; }

       class LeaveDetails
       {
           public string LeaveReason { get; set; }
           public DateTime LeaveDate { get; set; }
           public string LeaveType { get; set; }
       }

       public override Style SelectStyle(object item, DependencyObject container)
       {
           // Add custom Tooltip for each calendar button
              Control control = container as Control;
           if (control != null)
           {
               CalendarButtonContent buttonContent = (item as CalendarButtonContent);
               List<LeaveDetails> leaveDetailsList = new List<LeaveDetails>();
               leaveDetailsList.Add(new LeaveDetails { LeaveReason = "Christmas Holiday", LeaveDate = new DateTime(2013, 3, 1), LeaveType = "Sick" });
               leaveDetailsList.Add(new LeaveDetails { LeaveReason = "Sunday", LeaveDate = new DateTime(2013, 3, 6), LeaveType = "Holiday" });
               leaveDetailsList.Add(new LeaveDetails { LeaveReason = "Sunday", LeaveDate = new DateTime(2013, 4, 6), LeaveType = "Holiday" });
               leaveDetailsList.Add(new LeaveDetails { LeaveReason = "Sick", LeaveDate = new DateTime(2013, 5, 6), LeaveType = "Sick" });
               foreach (LeaveDetails selectedLeave in leaveDetailsList)
               {
                   if (buttonContent.Date == selectedLeave.LeaveDate)
                   {
                       control.ToolTip = new ToolTip() { Content = selectedLeave.LeaveReason };
                       control.FontWeight = FontWeights.Bold;
                       if (selectedLeave.LeaveType == "Sick")
                       {
                           control.Background = System.Windows.Media.Brushes.LightBlue;
                       }
                       else if (selectedLeave.LeaveType == "Holiday")
                       {
                           control.Background = System.Windows.Media.Brushes.LightGreen;
                       }
                   }
               }
           }
           return base.SelectStyle(item, container);
       }
   }

Appreciate your immediate action on this article. Thank you.

Regards, Prem

[Vladi]

Hello Prem,

We tried to reproduce the performance issue with the code snippets you sent to us but to no avail. It is possible that on less powerful machines there could be performance issues when the DayButtonStyleSelector is set.

Could you give us more information on the computer configuration you are experiencing the performance issues? Unfortunately in the current version of RadCalendar there isn't an alternative approach on achieving the desired scenario.

We are constantly trying to improve the performance of our controls and we have planed to look into the possibility of improving the overall performance of RadCalendar for our next major Q2 2013 release of RadControls. 

All the best,
Vladi
the Telerik team

[P r e m k u m a r]

Dear Vladi,

My machine configuration is listed below:

Windows 7 with Core 2 Duo processor
Memory : 3GB
System Type : 32 Bit.

Regards, Prem

[P r e m k u m a r]

Dear Vladi,

Thanks for you reply. Now i am facing the below issue.

Every users will have there own holiday/ leave list. So i want to pass the employeeid from the xaml page to my DayButtonStyleSelector class

I've achieve by creating object for my xaml page and i get the ID.

But the problem which i am facing is: DayButtonStyleSelector is invoke for every date so it creates N-numbers of MainWindow.xaml
instances. so i can see n-numbers of mainwindow opened in background.

Can you provide some solution for this.

I've bold the employeeId call and DB call in the below snippet.

public override Style SelectStyle(object item, DependencyObject container)
      {
          // Add custom Tooltip for each calendar button
          Control control = container as Control;
          Leave objLeave = new Leave();
          List<Leave> leaveList = new List<Leave>();


// To get the employeeid from the MainWindow.xaml page
              MainWindowobjMainWindow = new MainWindow();
      int EmployeeId = objMainWindow.GetEmployeeId();


          if (EmployeeId != 0)
          {

    // To get the Leave details from the database
              leaveList = objLeave.GetLeaveDetailsByEmployeeId(EmployeeId);

              if (control != null)
              {
                  CalendarButtonContent buttonContent = (item as CalendarButtonContent);
                  foreach (Leave selectedLeave in leaveList)
                  {
                      if (buttonContent.Date == Convert.ToDateTime(selectedLeave.LeaveStartDate))
                      {
                          if ((buttonContent.Date.DayOfWeek != DayOfWeek.Sunday || buttonContent.Date.DayOfWeek != DayOfWeek.Saturday)) // && buttonContent.ButtonType != CalendarButtonType.Date)
                          {
                              control.ToolTip = new ToolTip() { Content = selectedLeave.LeaveStartDate + "<br/>" + selectedLeave.LeaveType + "<br/>" + selectedLeave.LeaveReason };
                              control.FontWeight = FontWeights.Bold;

                              if (selectedLeave.LeaveType.Trim() == "Cassual Leave")
                              {
                                  control.Background = System.Windows.Media.Brushes.LightBlue;
                              }
                              else if (selectedLeave.LeaveType.Trim() == "Marriage Leave")
                              {
                                  control.Background = System.Windows.Media.Brushes.LightGreen;
                              }
                          }
                      }
                  }
              }
          }
          return base.SelectStyle(item, container);
      }

Appreciate your immediate action on this article. Thank you.

Regards, Prem

[Vladi]

Hello Prem,

The SelectStyle() method is called for each Button (date) in the current visible month of the Calendar in order for the correct Style of each date to be applied.

We are not aware of any appropriate approaches on handling this scenario when creating multiple instances of the MainWindow in that method but it shouldn't be an issues as C# garbage collection will collect those objects when they are not used.

Greetings,
Vladi
the Telerik team

[P r e m k u m a r]

Dear Vladi,

I'm new to the WPF. so please excuse.

I've to load the calendar based on employee id. How can i pass the Id into DayButtonStyleSelector class.

When i use the below snippet. I can't able to get the value, because it creates a new instance when i invoke MainWindow. so i can't able to get the Id. 

MainWindow objMainWindow = new MainWindow();

   int EmployeeId = objMainWindow.GetEmployeeId();

I tried in many ways i am clueless. Please help to fix case. 


Regards, Prem

[Vladi]

Hi Prem,

I would recommend you to either pass the EmployeeId from the ViewModel or by creating a method in the MainWindow that returns the necessary Id. The next code snippets shows how to get the id from a property in your ViewModel:
the ViewModel should look like this:

public class ViewModel
{
    public int EmployeeId { get; set; }

    public ViewModel()
    {
        this.EmployeeId = 1;
    }
}

then bind the in the ViewModel to the Grid in the MainWindow  and in the SelectStyle() method all you need to do is drill to the EmployeeId:

public override Style SelectStyle(object item, DependencyObject container)
{
    MainWindow objMainWindow = new MainWindow();
    var mainWindowGrid = objMainWindow.Content as Grid;
    var viewModel = mainWindowGrid.DataContext as ViewModel;
    var employeeIdFromViewModel = viewModel.EmployeeId;
    ...
}

The second approach is to create a method in your MainWindow that returns the id. The next code snippet show a sample implementation that returns 1:

public int GetEmployeeId()
{
    return 1;
}

and in the SelectStyle() method just call that method to get the id:

public override Style SelectStyle(object item, DependencyObject container)
{
    MainWindow objMainWindow = new MainWindow();
    var employeeIdFromMainWindow = objMainWindow.GetEmployeeId();
    ...
}

Hope this is helpful.

Kind regards,
Vladi
the Telerik team

[P r e m k u m a r]

Dear  Vladi,

I suppose to pass the EmployeeId dynamically (every selection of EmployeeId from the Grid).

The given approach is works, when we hard-code the EmployeeId.

Kindly help me to solve the issue. 

Regards, Prem

[P r e m k u m a r]

Hi Vladi,

I'm waiting for your reply. Kindly help me to close this issue.

Regards, Prem

[Vladi]

Hi,

The described case is scenario specific and without being able to reproduce the exact case on our side we cannot provide you with an appropriate guidelines. The previously described guidelines should be helpful in achieving the described behavior.

Could you open a support ticket and in that post send us a sample project that recreated the desired behavior in your specific scenario, that would be helpful in understanding the specific scenario and see which approach would be the best fit.

All the best,
Vladi
the Telerik team