Getting Scheduler to appear in new design

[Makai]

I was originally using the Scheduler in a project with simply one html and one css file. Now I am currently using the trial version of Kendo UI Complete for ASP.NET MVC and have the Scheduler set up as an MVC 4 project. The javascript from my original code still creates the calendar; however I am currently commenting out the old code and instead attempting to borrow from the code provided on the demo for ASP.NET MVC, index.cshtml. Here's my adaption of the code:

@(Html.Kendo().Scheduler<iDashboard.Models.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .Height(400)
    .Views(views =>
    {
        views.DayView();
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
        views.AgendaView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "Office", Value = 1, Color = "#f8a398" } ,
                new { Text = "Home", Value = 2, Color = "#51a0ed" } ,
                new { Text = "Shared", Value = 3, Color = "#56ca85" }
            });
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskId);
            m.Field(f => f.OwnerID).DefaultValue(1);
        })
        .Read("Task_Read", "Home")
        .Create("Task_Create", "Home")
        .Destroy("Task_Destroy", "Home")
        .Update("Task_Update", "Home")
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
        })
    )
)

For some reason I am only getting a gray line. I'm not sure why the .Views method is not working. As far as I know, I referenced all the necessary files in the head tag of _Layout in the html. I could be wrong but it seems to me that everything is fine with the model and controller, but for some reason the view is not displaying the scheduler. I'd appreciate if someone could point me in the right direction. Thank you!

Note: I based the model and controller off of the following tutorial --> http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/scheduler/ajax-editing

[Atanas Korchev]

Hi,

 Your code looks correct and should have worked provided that your project is properly configured. Do you see any JavaScript errors in your page? Is the Task_Read action method of your HomeController class invoked?

Regards,
Atanas Korchev
Telerik

[Makai]

Thank you for your response! I am getting a Javascript error now actually:

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'kendoScheduler'

Does this help identify the problem? Also, I put a breakpoint in Tasks_Read in the HomeController class and it never seems to get there. Please let me know if there's any more information I can provide to help fix this.

Thank you,
Makai

[Atanas Korchev]

Hello,

 Getting this error means that the scheduler javascript files are not included in the page. This may happen if you are using an older version of Kendo UI. You need at least 2013.7.16. The scheduler isn't included in older versions.

Regards,
Atanas Korchev
Telerik

[Makai]

So it looks like I am using the kendo 2013.2.716 files. I see the scheduler files included so I am not sure why I am still getting errors. Any idea what else could be wrong or if these are the wrong files, maybe I have them in the wrong place?

thanks in advance.

[Rosen]

Hi Makai,

Could you please verify that you do not have jQuery included multiple times on the page? If you continue experiencing difficulties please provide a small working project in which it can be observed locally.

Regards,
Rosen
Telerik

[Makai]

I belive this is all the code i have for the scheduler on the index.cshtml page:

<div id="Calendar_div" class="image">
<div id="calendar_text_container" class="tile_header">
<p class="tile_header_text">Calendar</p>

<!--<iframe src="https://www.google.com/calendar/embed?showNav=0&amp;showPrint=0&amp;showTabs=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=ardentmc808%40gmail.com&amp;color=%232952A3&amp;ctz=Pacific%2FHonolulu" style=" border-width:0 " width="538" height="430" frameborder="0" scrolling="no"></iframe>-->
<!--end of copy and pasted Kendo UI code-->

<span id="input_span">
<h6 class="calendar_input">Kihei</h6>
<h6 class="calendar_input">Reston</h6>
<h6 class="calendar_input">Shared</h6>
</span>
<div id="scheduler"></div>
<div id="group">
<input checked type="checkbox" id="Kihei" value="1">
<input checked type="checkbox" id="Reston" value="2">
<input type="checkbox" id="Shared" value="3">
</div>
</div>
</div>


 <!--original javascript that creates the calendar with dummy data-->
<script type ="text/javascript">
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 400,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda",
],


schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskId", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},

filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
timezone: "Etc/UTC",
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Kihei", value: 1, color: "#f8a398" },
{ text: "Reston", value: 2, color: "#51a0ed" },
{ text: "Shared", value: 3, color: "#56ca85" }
]
}
],

});
//have to get rid of dataSource if you want dummy data to appear - remember to delete a bracket from the end also
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.add({
start: new Date("2013/6/6 09:00 AM"),
end: new Date("2013/6/6 10:00 AM"),
title: "IRD Daily Scrum",
recurrenceRule: "FREQ=DAILY"
});
scheduler.dataSource.add({
start: new Date("2013/6/25 01:00 PM"),
end: new Date("2013/6/25 02:00 PM"),
title: "Cookie Contest",
recurrenceRule: "FREQ=MONTHLY"
});
scheduler.dataSource.add({
start: new Date("2013/7/19 02:45 PM"),
end: new Date("2013/7/19 03:15 PM"),
title: "Farewell to Intern AJ",
description: "Ice cream mochi party to say goodbye to AJ"
});


</script>

}

and this is the code i have in the layout.cshtml page:

@using Kendo.Mvc.UI;
<!DOCTYPE html>
<html lang="en">
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css"/>

@*<link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type ="text/css"/>
<link href="Content/kendo/2013.2.716/kendo.metro.min.css" rel="stylesheet" type ="text/css"/>

<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Kendo/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.aspnetmvc.min.js"></script>
<script src="Scripts/kendo/2013.2.716/kendo.scheduler.view.min.js"></script>
<script src="Scripts/kendo/2013.2.716/kendo.secheduler.min.js"></script>*@

<!--Razor version of references. I'm hoping it will make a difference and allow the other (MVC) version of the scheduler show up-->

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.metro.min.css")">
<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
@* <script src="@Url.Content("~/Scripts/kendo.timezones.min.js")"></script>*@

@* <script type="text/javascript" src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>*@
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>


<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>
@* <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>*@

<link rel="stylesheet" type="text/css" href="Content/Site.css">
<title>iDashboard by ArdentMC</title>

</head>
<body>
<header>
<a name = "top"> </a> <!--anchor for scroll up-->
<div id = "header">
<h1 class ="bold">iDashboard</h1>
<h3 id ="nextline" class ="italic">by ArdentMC</h3>
<img class ="icon" src ="Images/icon_in.png"/>
<img class ="icon" src ="Images/icon_twitter.png"/>
<img class ="icon" src ="Images/icon_FB.png"/>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">

</div>
</footer>

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jqueryui")
</body>
</html>


I have no idea what I am missing but any help or advice would be greatly appreciated. I just need to be able to save events added to the database and as of right now the scheduler isnt even displaying on the page.


thank you in advance

[Rosen]

Hi Makai,

Looking at the code you have pasted it seems that jQuery is included at least three times on the page. Please correct this, it should be included only once before the first placed it is needed.

Also there are scripts which are also included multiple times, for example KendoUI, jQueryUI scripts etc.

Regards,
Rosen
Telerik