javascript - JSON data type with inline datepicker (calendar) -
i'm developing web application while/for learning web development has calendar widget/portlet/sidebar thingy. used in-lined bootstraps datepicker.you can click on date , posts "date_event" == "date_clicked" (i'm using php mvc structure , mysql). on front.
i got stuck trying dates on calendar highlighted if post exists day of month. used ajax , json post dates corresponding selected month, triggered datepicker.changemonth. nice json object (or it?) php function sent browser:
calendar.php (controller)
function events_per_month($time) { $date = explode("-", $time); $month = $date[0]; $year = $date[1]; $start = mktime(0, 0, 0, $month, 1, $year); $end = mktime(23, 59, 0, $month, date('t', $start), $year); $start1 = date('y-m-d h:i:s', $start); $end1 = date('y-m-d h:i:s', $end); echo json_encode($this->post_m->get_calendar($start1, $end1)); }
post_m.php (model)
function get_calendar($start, $end) { $this->db->select('date_event'); $this->db->where('date_event >', $start); $this->db->where('date_event <', $end); $this->db->where('approved =', 'true'); return $this->db->get($this->_table_name)->result(); }
xmlhttp.responsetext looks if use fore mentioned events trigger console.log:
[{"date_event":"2015-06-19 00:00:00"},{"date_event":"2015-06-05 00:00:00"},{"date_event":"2015-06-03 00:00:00"},{"date_event":"2015-06-30 00:00:00"},{"date_event":"2015-06-30 00:00:00"}]
which want (or it?). day (03, 05, 19, 30 in above example). can use them highlight td elements corresponding value. , frontend code:
jquery(document).ready(function () { var xmlhttp; function loadxmldoc(url, cfun) { if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange = cfun; xmlhttp.open("get", url, true); xmlhttp.send(); } //functional code feature goes here! function highlightevents(date) { loadxmldoc("calendar/events_per_month/" + date, function () { if (xmlhttp.readystate === 4 && xmlhttp.status === 200) { var monthevents = xmlhttp.responsetext; console.log("all posts month: " + monthevents); //var array = $.parsejson(monthevents); } }); } $('.ss_calendar').datepicker() .on('changemonth', function (e) { var date = new date($('.ss_calendar').datepicker('getmonth')); var currmonth = new date(e.date).getmonth() + 1; var curryear = string(e.date).split(" ")[3]; highlightevents(currmonth + '-' + curryear); }); });
for willing - thank you!
thanks clarification above, simplest thing can come with:
var monthsjson = json.parse(monthevents); var days = []; monthsjson.foreach(function(dateobj) { var date = new date(dateobj.date_event); days.push(date.getdate()); // gets day of month // https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/date }); //days array [19, 5, 3, 30, 30]
you may want remove duplicates depending on how many you're processing , how plan highlight td
's.
not sure how address rest of question you've done lot of work (all of hard parts, really) already. take easy on , others. :)
Comments
Post a Comment