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

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -