c# - How to add checkboxes to each day in this calendar view? -
i trying add simple checkbox feature each day in calendar view. must inline style of current calendar , when bool selected must able save changes database. suggestions appreciated.
my main issue @ moment checkboxes being selected not being saved db.
controller.cs
private f2fw _db = new f2fw(); [httpget] public actionresult calendarindex() { list<event> events = new list<event>(); project.models.calendar calendar = new project.models.calendar(); calendar.setdate(datetime.now.year, datetime.now.month, datetime.now.day); calendar.view(@"~\views\patient\calendar.cshtml"); calendar.viewdata.add("events", events); viewbag.calendar = calendar.render(); return view(calendar); } [httppost] public actionresult calendarindex(user user, calendararg calarg, int daycounter, string[] cbx_day, patient patient, sessionexercise sessionexercise) { sessioninformation sessiondata = new sessioninformation(); session lastsession = db.sessions.where(s => s.activeuserid == user.userid).orderbydescending(e => e.startedat).firstordefault(); calarg.completedtoday = datetime.today; if (modelstate.isvalid) { if (calarg.completionrequested == false) { //do nothing! } else if (calarg.completionrequested == true) { if (sessiondata.completed == true) { if (sessionexercise.finishedat == calarg.past) { list<event> events = new list<event>(); events.add(new event() { title = "exercises completed", eventdate = datetime.now.adddays(0), type = event.eventtype.vacation }); //green } } if (sessiondata.completed == false) { if (sessionexercise.finishedat == calarg.past) { list<event> events = new list<event>(); events.add(new event() { title = "exercises uncompleted", eventdate = datetime.now.adddays(0), type = event.eventtype.critical }); //red } } } _db.savechanges(); return redirecttoaction("calendarindex"); // or ever want go } else { return view(calarg); } } public class event { public string title { get; set; } public datetime eventdate { get; set; } public eventtype type { get; set; } public enum eventtype { appointment, meeting, vacation, birthday, personal, critical } } model.calendar.cs
public class calendar { int _year; int _month; datetime _selecteddate; string _viewfile = ""; viewdatadictionary _viewdata = new viewdatadictionary(); func<datetime, bool, string> _ondayrenderfunc = null; public calendar() { setdate(datetime.now.year, datetime.now.month); } public void setdate(int year, int month) { _year = year; _month = month; _selecteddate = new datetime(_year, _month, 1); } public void setdate(int year, int month, int day) { _year = year; _month = month; _selecteddate = new datetime(_year, _month, day); } public datetime date { { return _selecteddate; } } public void ondayrender(func<datetime, bool, string> func) { _ondayrenderfunc = func; } public void view(string viewfile) { _viewfile = viewfile; } public viewdatadictionary viewdata { { return _viewdata; } } public string render() { string[] daynames = { "sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday" }; int daysinmonth = datetime.daysinmonth(_year, _month); int pyear = _year; int pmonth = _month; if ((_month - 1) < 1) { --pyear; pmonth = 12; } else { --pmonth; } int daysinprevmonth = datetime.daysinmonth(pyear, pmonth); datetime d1 = new datetime(_year, _month, 1); int daypos = (int)d1.dayofweek; daysinprevmonth -= daypos - 1; stringbuilder control = new stringbuilder(); control.append("<table cellpadding=\"0\" cellspacing=\"0\">\n<thead>\n<tr>\n"); (int = 0; < daynames.length; i++) { control.append(string.format("<th>{0}</th>\n", daynames[i])); } control.append("</thead>\n<tbody>\n"); int totaldaysinmonth = daysinmonth + daypos; int col = 0; int day = 0; string cellvalue = ""; (int idx = 0; idx < totaldaysinmonth; idx++) { if (col == 0) { control.append("<tr>\n"); } if (idx >= daypos) { ++day; if (_viewfile == "") { cellvalue = _ondayrenderfunc != null ? _ondayrenderfunc(new datetime(_year, _month, day), true) : day.tostring(); } else { viewdata.model = new calendararg() { date = new datetime(_year, _month, day), selecteddate = _selecteddate, currentmonth = true }; cellvalue = this.parse(_viewfile); } control.append(string.format("<td data-day=\"{0}\" data-month=\"{1}\" data-year=\"{2}\">{3}</td>\n", day, _month, _year, cellvalue)); } else { if (_viewfile == "") { cellvalue = _ondayrenderfunc != null ? _ondayrenderfunc(new datetime(pyear, pmonth, daysinprevmonth), false) : daysinprevmonth.tostring(); } else { viewdata.model = new calendararg() { date = new datetime(pyear, pmonth, daysinprevmonth), selecteddate = _selecteddate, currentmonth = false }; cellvalue = this.parse(_viewfile); } control.append(string.format("<td>{0}</td>\n", cellvalue)); ++daysinprevmonth; } if (col == 6) { control.append("</tr>\n"); col = 0; continue; } ++col; } if (col < 7) { int nextmonthday = 1; (int c = col; c < 7; c++) { if ((_month + 1) > 12) { ++_year; _month = 1; } else { ++_month; } if (_viewfile == "") { cellvalue = _ondayrenderfunc != null ? _ondayrenderfunc(new datetime(_year, _month, nextmonthday), false) : nextmonthday.tostring(); } else { viewdata.model = new calendararg() { date = new datetime(_year, _month, nextmonthday), selecteddate = _selecteddate, currentmonth = false }; cellvalue = this.parse(_viewfile); } control.append(string.format("<td>{0}</td>\n", cellvalue)); ++nextmonthday; } control.append("</tr>\n"); } control.append("</tbody>\n</table>\n"); return control.tostring(); } private string parse(string viewfile) { using (var sw = new stringwriter()) { controllercontext ctx = new system.web.mvc.controllercontext(); ctx.httpcontext = new httpcontextwrapper(httpcontext.current); razorview view = new razorview(ctx, viewfile, "", false, null); tempdatadictionary tdd = new tempdatadictionary(); var viewcontext = new viewcontext(ctx, view, viewdata, tdd, sw); view.render(viewcontext, sw); return sw.getstringbuilder().tostring(); } } } model.calendararg.cs
public class calendararg { public datetime selecteddate { get; set; } public datetime date { get; set; } public bool currentmonth { get; set; } public bool completionrequested { get; set; } public datetime completedtoday { get; set; } } view.calendarindex.cshtml
<style> table { width: 100%; border: 0px; border-collapse: collapse; border: 1px solid #eee; } table thead tr th { font-family: tahoma; font-weight: normal; color: #666; } table tbody tr td { border: 1px solid #eee; width: 14%; } table tbody tr td .cell1, .cell2 { min-height: 150px; height: 100%; } table tbody tr td .selected_day h2 { color: #fff; background-color: #3498db; text-shadow: none; } table tbody tr td .cell1 { background-color: #fff; } table tbody tr td .cell1:hover h2 { box-shadow: 1px 2px 3px #999; } table tbody tr td .cell2 { background-color: #fcfcfc; } table tbody tr td .cell2 h2 { color: #ccc; } table tbody tr td h2 { font-family: tahoma; font-size: 20px; font-weight: normal; float: right; margin: 0px; padding: 6px; color: #154b67; background-color: #eee; display: block; width: 25px; height: 25px; text-align: center; text-shadow: 2px 1px #fff; } table tbody tr td .evt { font-family: tahoma; font-size: 12px; margin: 5px; padding: 10px; color: #fff; border-radius: 2px; } table tbody tr td .clear { clear: both; } .meeting { background-color: #ddd; color: #222 !important; } .personal { background-color: #3498db; } .vacation { background-color: #2ecc71; } .appointment { background-color: #f5ab35; } .critical { background-color: #f22613; } </style>@html.raw(viewbag.calendar) view.calendar.cshtml
@model project.models.calendararg @{ calendararg calarg = this.model; list<project.controllers.event> events = (list<project.controllers.event>)viewdata["events"]; string cssclass = calarg.currentmonth == true ? "cell1" : "cell2"; } @if (calarg.date.day == calarg.selecteddate.day) { cssclass += " selected_day"; } @if (calarg.date.day == calarg.date.day) { if (datetime.now <= calarg.date) { @html.checkboxfor(m => m.completionrequested, new { @checked = calarg.completionrequested }); } } <div class="@cssclass"> <h2>@calarg.date.day.tostring()</h2> <div class="clear"></div> @foreach (var evt in events) { if (evt.eventdate.date.tostring("yyyymmdd") == calarg.date.tostring("yyyymmdd")) { <div class="evt @evt.type.tostring()">@evt.title</div> } } </div> update
by adding line of code calendar.cshtl:
@if (calarg.date.day == calarg.date.day) { @html.checkboxfor(m => m.completionrequested, new { @checked = calarg.completionrequested }); } it surprisingly works, guess i'd know how alter css style sheet in calendar index have checkboxes flush calendar design (i.e. inline calendar , not above it) , how save changes bool db.
have inside foreach loop:
@html.checkboxfor(m => m.completionrequested , new { @checked = evt.completionrequested }); update: answer question in comments. httppost controller , pass model data.
[httppost] public actionresult calendarindex(calendararg model) { // check model valid if(modelstate.isvalid) { // code here update database return redirecttoaction("index"); // or ever want go } else { return view(model); // return view, model not valid } } update 2:
if want add class name can this:
@html.checkboxfor(m => m.completionrequested , new { @checked = evt.completionrequested, @class = "checkbox" }); or can add css this:
input[type="radio"]:checked { // css when radio button selected } input[type="radio"] { // css when radio button not selected } these css styles global every input element type radio styles.
and when want change changes db context, need first find current 1 context. add true value completionrequested property , call savechanged method context. you'r first question checkboxes on calendarview, not how save changes db. that's question.
Comments
Post a Comment