This is a migrated thread and some comments may be shown as answers.

Getting Scheduler to appear in new design

7 Answers 116 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Makai asked on 05 Aug 2013, 09:56 PM

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

7 Answers, 1 is accepted

answered on 21 Aug 2013, 09:22 PM

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>




<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>


<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>*@



<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> 
<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