Awesome ASP.net Core and MVC Controls

Scheduler Demo

Scheduler built using the awesome Grid, AjaxRadioList and PopupForm controls.

SchedulerDemo/Index.cshtml
@(Html.Awe().InitPopupForm()
.Name("createMeeting")
.Group("scheduler")
.Height(570)
.Url(Url.Action("Create"))
.ParameterFunc("utils.getMinutesOffset")
.Success("utils.refreshGrid('Schedule1')"))

@(Html.Awe().InitPopupForm()
.Name("editMeeting")
.Group("scheduler")
.Height(570)
.Url(Url.Action("Edit"))
.ParameterFunc("utils.getMinutesOffset")
.Success("utils.refreshGrid('Schedule1')"))

@(Html.Awe().InitPopupForm()
.Name("deleteMeeting")
.Group("scheduler")
.Height(200)
.Url(Url.Action("Delete"))
.Success("utils.refreshGrid('Schedule1')"))

<button type="button" class="awe-btn mbtn" onclick="awe.open('createMeeting')">Create</button>

<div class="scheduler">
<div class="schedBar">
<div class="o-btng sbitem">
<button type="button" class="awe-btn todaybtn">Today</button><button type="button" class="awe-btn prevbtn"><i class="o-arw left"></i></button><button type="button" class="awe-btn nextbtn"><i class="o-arw right"></i></button>
</div>
<div class="sbitem">
@Html.Awe().DatePicker("Date").CssClass("schDate").HtmlAttributes(null, new { tabindex = -1 })
<span class="dateLabel"></span>
</div>
<div class="sbitem sbvtype">
@(Html.Awe().AjaxRadioList("ViewType")
.CssClass("viewType")
.ButtonGroup()
.Url(Url.Action("GetViewTypes")))
</div>
</div>

@(Html.Awe().Grid("Schedule1")
.Height(430)
.Mod(o => o.Loading())
.ShowFooter(false)
.ShowGroupedColumn(false)
.RowClassClientFormat(".RowClass")
.CssClass("schedulerGrid")
.Url(Url.Action("ScheduleGetItems"))
.Parent("ViewType", "viewType")
.Parent("HoursType", "hoursType")
.Parent("HourStep", "hourStep")
.Parent("Date", "date")
.ParameterFunc("utils.getMinutesOffset"))

<div class="schedBotBar">
@(Html.Awe().AjaxRadioList("HoursType")
.Mod("awem.odropdown")
.Value(SchedulerHour.FullDay)
.Url(Url.Action("GetHoursTypes")))

@(Html.Awe().AjaxRadioList("HourStep")
.Odropdown(o => o.InLabel("Step: "))
.Value(60)
.Url(Url.Action("GetHourSteps")))
</div>
</div>

<script>
$(function () {
utils.scheduler('Schedule1', 'Meeting');// gridId, popupName (create|edit|delete + 'Meeting')
});

function buildCell(i) {
return function (row) {
var cell = row.Cells[i];
if (!cell) return "";
var result = "<div data-ticks='" + cell.Ticks + "' data-allday='" + row.AllDay + "' class='timePart' >";

if (cell.Day) {
result += "<div class='awe-il'><span class='day' data-date='" + cell.Date + "'>" + cell.Day + "</span></div>";
}

if (cell.Events) {
$.each(cell.Events, function (index, value) {
var style = '';
if (value.Color) {
var color = 'fff';
var bcolor = value.Color.replace('#', '');

if (hexToVal(bcolor) > 530) {
color = darken(bcolor);
}

style = 'style="background-color:' + value.Color + '; color:#' + color + ';"';
}
result += '<div class="schEvent" data-id="' + value.Id + '" ' + style + '>'
+ (value.Time ? '<div class="schTime">' + value.Time + '</div>' : "")
+ '<button type="button" class="delEvent">&times;</button>'
+ '<div class="eventTitle">' + value.Title + '</div>'
+ '</div>';
});
}

result += '</div>';
return result;
};
}

function hexToVal(hex) {
var r = parseInt(hex.substr(0, 2), 16),
g = parseInt(hex.substr(2, 2), 16),
b = parseInt(hex.substr(4, 2), 16);
return r + g + b;
}

function darken(hex) {
var r = parseInt(hex.substr(0, 2), 16),
g = parseInt(hex.substr(2, 2), 16),
b = parseInt(hex.substr(4, 2), 16);

function f(c) {
var h = Math.max(0, c - 170).toString(16);
if (!h) h = '00';
if (h.length == 1) h = '0' + h;
return h;
}

return f(r) + f(g) + f(b);
}
</script>



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.