I am trying to implement the scheduler in a web form page with a master page container. I get nothing. Without the master page, the scheduler appears fine, as soon as I put it in a set of asp:Content tags, it does not work. I found a post here about this, but that solution did not work for me…
Here is my (simplifed) code…
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="../Content/jquery-ui.min.css" />
<link rel="stylesheet" href="../Content/themes/jquery-ui.theme.min.css" />
<link rel="stylesheet" href="../Content/dhtmlxscheduler.css"/>
<script src="../Content/jquery-2.1.4.min.js"></script>
<script src="../Content/jquery-ui.min.js"></script>
<script src="../Scripts/dhtmlxscheduler.js"></script>
<script src="../Scripts/dhtmlxscheduler_editors.js"></script>
<script src="../Scripts/dhtmlxscheduler_minical.js"></script>
<script>
function init() {
scheduler.locale.labels.section_Confirmed = "Confirmed?";
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 23;
scheduler.config.limit_time_select = true;
scheduler.config.time_step = 30;
scheduler.config.start_on_monday = true;
//scheduler.config.details_on_dblclick = true;
scheduler.config.details_on_create = true;
scheduler.config.separate_short_events = true;
scheduler.config.lightbox.sections = [
{
name: "Calendar", height: 40, map_to: "type", type: "select", options:
[{ key: 1, label: "-Select-" },
{ key: 2, label: "Community" },
{ key: 3, label: "Client" },
{ key: 4, label: "Lead Source" },
{ key: 5, label: "Business" },
{ key: 6, label: "Personal" },
{ key: 7, label: "Marketing/Expos/Tradeshows" }
]
},
{
name: "Source", height: 40, map_to: "type", type: "select", options:
[{ key: 1, label: "-Select-" },
{ key: 2, label: "Client or" },
{ key: 3, label: "Community Name" },
{ key: 4, label: "Will Appear" },
{ key: 5, label: "Here. Or it will" },
{ key: 6, label: "be free text" }
]
},
{ name: "Subject", height: 26, map_to: "text", type: "textarea", focus: true },
{ name: "Confirmed", map_to: "confirmed", type: "checkbox" },
{ name: "Description", height: 50, map_to: "text", type: "textarea" },
{ name: "time", height: 72, type: "calendar_time", map_to: "auto" }
];
scheduler.init('scheduler_here', new Date(), "week");
// scheduler.load("./data/events.xml");
}
</script>
<style type="text/css" media="screen">
html, body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
div.ui-datepicker {
font-size: 10px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="server">
<script>
$(document).ready(function () {
alert("init");
init();
})
</script>
<div id="scheduler_here" class="dhx_cal_container" style='width: 75%; height: 100%'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right: 204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right: 140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right: 76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</asp:Content>