Change date heading CSS in week view

8 posts, 0 answers
  1. Rimma
    Rimma avatar
    15 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    Hi, I'd like to show the date heading in a different style for today's date in week view.
    Is it possible?  I've updated the CSS on the time slot and that only changes the actual timeslots, not the corresponding heading for that day.
    Thanks!
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Feb 2013 Link to this post

    Hi Rimma,

    Try the following Javascript to style the today's date in week view.

    Javascript:
    <script type="text/javascript">
    function pageLoad() {
        $telerik.$(".rsHorizontalHeaderTable th").each(function (index, item) {
            var childNode = item.childNodes[0];
            if (childNode != null) {
                var today = new Date();
                today.setHours(0); today.setMinutes(0); today.setSeconds(0);
                if (childNode.href != null) {
                    var hrefDate = childNode.href.split('#')[1];
                    var date = new Date(hrefDate);
                    date.setHours(0); date.setMinutes(0); date.setSeconds(0);
                    if (date.toDateString() == today.toDateString()) {
                        item.style.backgroundImage = "none";
                        item.style.backgroundColor = "yellow";
                    }
                } else {
                    var innerText = childNode.innerHTML.trim();
                    var date = new Date(innerText);
                    date.setHours(0); date.setMinutes(0); date.setSeconds(0);
                    if (date.toDateString() == today.toDateString()) {
                        item.style.backgroundImage = "none";
                        item.style.backgroundColor = "yellow";
                    }
                }
            }
        });
    }
    </script>

    Thanks,
    Princy.
  5. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 16 Nov 2014 in reply to Princy Link to this post

    Hi,

    It does highlight the same day's name for all weeks-months.
    So why does it happen?
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 20 Nov 2014 Link to this post

    Hello,

    I would like to clarify that solution provided by Princy highlights the today's date in week view's heading section. It does not highlight the date only in week view and does not highlight in same day for each month. It only colors the today's date this year.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 20 Nov 2014 in reply to Boyan Dimitrov Link to this post

    What is the solution to just highlight today's date on the current week rather than the all year's today date's name ?
    Thank you
  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 24 Nov 2014 Link to this post

    Hello,

    I guess that you want to color all time slots for today's date in the week view. You can achieve this by using the RadScheduler OnTimeSlotCreated event and sets custom class for all today's date time slots:
    //code behind
    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
        {
            if (RadScheduler1.SelectedView == SchedulerViewType.WeekView && e.TimeSlot.Start.Date == DateTime.Now.Date)
            {
                e.TimeSlot.CssClass = "todaysDate";
            }
        }

    Using css you can set the time slot element background color.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 24 Nov 2014 in reply to Boyan Dimitrov Link to this post

    Can you provide me a JS code of it?
    Thank you
  14.
  15. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 26 Nov 2014 Link to this post

    Hello,

    Please find the client-side solution below:
    //JavaScript
    function pageLoad() {
        var scheduler = $find("<%= RadScheduler1.ClientID %>");
        if (scheduler.get_selectedView() == 1) {
            var timeSlotsDOM = $telerik.$($telerik.$(".rsContentTable tr td"));
            for (var i = 0; i < timeSlotsDOM.length; i++) {
                var DOMElement = timeSlotsDOM[i];
                var date = $find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(DOMElement).get_startTime().toDateString();          
                var todayDate = new Date().toDateString();
                if (date == todayDate) {
                    $telerik.$(DOMElement).addClass("todaysClass");
                }
     
            }
        }
         
    }
    //css
    .todaysClass {
                background-color:red;
            }


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top