Scheduler Date/Time Headers Not Lining up with Schedule Content

4 posts, 1 answers
  1. Steven
    Steven avatar
    7 posts
    Member since:
    Aug 2010

    Posted 06 Aug 2014 Link to this post

    I am having an issue with the Scheduler where the date headings (Sun thru Sat) and the timeline are not lining up with the schedule detail (see attached screenshots).  I am including the appropriate script files and style-sheets in the project and all of the other controls seem to be working fine.  FYI, this is in IE 11 but the issue seems to also reside in Chrome (v 36) and Firefox (v 26).  Any help or assistance would greatly be appreciated.
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 08 Aug 2014 Link to this post

    Hi Steven,

    From the provided information it seems that current behavior is related to custom CSS styles applied to the page. That why I would suggest to remove all custom CSS styles from the project and if the scheduler start working as expected to start adding CSS files one-by-one. This way you will be able to pinpoint the exact styles which are affecting the scheduler and fix them.

    Also please make sure all required KendoUI script and styles are included to the project:

    e.g.:


    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Steven
    Steven avatar
    7 posts
    Member since:
    Aug 2010

    Posted 08 Aug 2014 in reply to Vladimir Iliev Link to this post

    Thank you for the response.  I removed all custom formatting (via custom stylesheets) and the issue persists.  Please see my code below (Index.cshtml).  I even attempted to use the supplied CDN files however; when doing so, the scheduler disappears altogether.

    01.@{
    02.    Layout = null;
    03.}
    04. 
    05.<!DOCTYPE html>
    06.<html>
    07.<head>
    08.    <meta name="viewport" content="width=device-width" />
    09.    <title>Agenda</title>
    10.    @Styles.Render("~/Assets/Styles/kendo/css")
    11.    @Scripts.Render("~/Assets/Scripts/jquery")
    12.    @Scripts.Render("~/Assets/Scripts/kendo")
    13.</head>
    14.<body>
    15.<div>
    16.    @(Html.Kendo().Scheduler<ReMemberMvc.Models.Schedule>()
    17.        .Name("scheduler")
    18.        .Date(DateTime.Today)
    19.        .StartTime(new DateTime(2014, 01, 01, 07, 00, 00))
    20.        .EndTime(new DateTime(2014, 12, 31, 23, 00, 00))
    21.        .Editable(true)
    22.        .Height(600)
    23.        .Width(920)
    24.        .Views(views => {
    25.            views.DayView();
    26.            views.WeekView(weekView => weekView.Selected(true));
    27.            views.MonthView();
    28.            views.AgendaView();
    29.        })
    30.        .Timezone("Etc/UTC")
    31.        .BindTo(Model)
    32.    )
    33.</div>
    34.</body>
    35.</html>

    My BundleConfig.cs code: 
    01.using System.Web.Optimization;
    02. 
    03.namespace ReMemberMvc
    04.{
    05.    public class BundleConfig
    06.    {
    07.        public static void RegisterBundles(BundleCollection bundles)
    08.        {
    09.            bundles.Add(new ScriptBundle("~/Assets/Scripts/jquery").Include(
    10.                        "~/Assets/Scripts/jquery-1.8.2.min.js");
    11. 
    12.            bundles.Add(new ScriptBundle("~/Assets/Scripts/kendo").Include(
    13.                        "~/Assets/Scripts/kendo/kendo.all.min.js",
    14.                        "~/Assets/Scripts/kendo/kendo.aspnetmvc.min.js",
    15.                        "~/Assets/Scripts/kendo/kendo.timezones.min.js"));
    16. 
    17.            bundles.Add(new StyleBundle("~/Assets/Styles/kendo/css").Include(
    18.                        "~/Assets/Styles/kendo/kendo.common.min.css",
    19.                        "~/Assets/Styles/kendo/kendo.default.min.css"));
    20. 
    21.            bundles.IgnoreList.Clear();
    22.        }
    23.    }
    24.}

    Any additional thoughts would be greatly appreciated.

    Cheers!
  4. Steven
    Steven avatar
    7 posts
    Member since:
    Aug 2010

    Posted 08 Aug 2014 in reply to Vladimir Iliev Link to this post

    I believe that I found the issue.  As it turns out, I downloaded a new version of the jquery-1.9.1.min.js file from the jquery site and it seems to have corrected the problem with the style jumping around.  I am going to mark this post as answered.  Thank you again for your assistance.
Back to Top