cutielou22

Well, I want to make it so a user can have there own events and they show up in the calendar. The calendar you can "flip" through the months to look at the months coming up. I want the days of events to be highlighted a certain color. Since you say my " ajax code sends the date": then how do I grab that information and compare it with the calendar? That is what I don't get.

So I added data-day, but that must up all dates in the calendar. What would data-day be linked to - I have nothing called that right now. Is the ajax I have now correct then (and in the correct spot)? - is json_encode() correct also? I am completely new to this. Just using Google.

Okay. So I have done only ajax forms. So I am getting a little confused while researching . . . what I have added: Underneath: generateCalendar(currentDate); I added (still in the same function as generateCalendar - not sure if correct either): $.ajax({ type: "POST", dataType: 'json', url: "cal_events.php", async: false, data: {date: currentDate}, contentType: "application/json; charset=utf-8", success: function (msg) { console.log(msg); } }); Then I created the page cal_events.php with this code: $share_with = user_shared($user); $stmt2 = $mysqli->prepare("SELECT date, status FROM pto_tracker WHERE account = ? ORDER BY date"); $stmt2->bind_param('i', $share_with); $stmt2->execute(); $stmt2->store_result(); $count = $stmt2->num_rows; $stmt2->bind_result($date, $status); $stmt2->fetch(); $stmt2->close(); $current_date = cleansafely($_POST['date']); if (($count >= 1) && ($current_date == $date)){ if ($status == "pending") { $background_color = "#f0cb11"; $status_show = "<span class=\"label plain\">Pending</span>"; } if ($status == "approved") { $background_color = "#4CAF50"; $status_show = "<span class=\"label green\">Approved</span>"; } if ($status == "denied") { $background_color = "#c62d1f"; $status_show = "<span class=\"label red\">Denied</span>"; } $array .= $date . $status_show; } $out = array_values($array); json_encode($out); //echo json_encode($array, JSON_FORCE_OBJECT); I am not sure how to go about actually finding the dates on the calendar to the ones in table.

I have a javascript calendar and I want to make it so when a event is added to a mysql table it can be seen on the calendar. I know you can't put SELECT and other mysql stuff in a script so how can I do this? HTML: <div id="main" class="container"> <span class="jumbotron"> <h1 class="text-center"> <a id="left" href="#"> <i class="fas fa-chevron-left"></i> </a> <span id="month"></span> <span id="year"></span> <a id="right" href="#"> <i class="fas fa-chevron-right"></i> </a> </h1> </span> <span class="row"> <span class="col-sm-10 col-sm-offset-1"></span> </span> <table class="table"></table> </div> JAVASCRIPT for calendar: $(document).ready(function() { var currentDate = new Date(); function generateCalendar(d) { function monthDays(month, year) { var result = []; var days = new Date(year, month, 0).getDate(); for (var i = 1; i <= days; i++) { result.push(i); } return result; } Date.prototype.monthDays = function() { var d = new Date(this.getFullYear(), this.getMonth() + 1, 0); return d.getDate(); }; var details = { // totalDays: monthDays(d.getMonth(), d.getFullYear()), totalDays: d.monthDays(), weekDays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], }; var start = new Date(d.getFullYear(), d.getMonth()).getDay(); var cal = []; var day = 1; for (var i = 0; i <= 6; i++) { cal.push(['<tr>']); for (var j = 0; j < 7; j++) { if (i === 0) { cal[i].push('<td>' + details.weekDays[j] + '</td>'); } else if (day > details.totalDays) { cal[i].push('<td>&nbsp;</td>'); } else { if (i === 1 && j < start) { cal[i].push('<td>&nbsp;</td>'); } else { cal[i].push('<td class="day">' + day++ + '</td>'); } } } cal[i].push('</tr>'); } cal = cal.reduce(function(a, b) { return a.concat(b); }, []).join(''); $('table').append(cal); $('#month').text(details.months[d.getMonth()]); $('#year').text(d.getFullYear()); $('td.day').mouseover(function() { $(this).addClass('hover'); }).mouseout(function() { $(this).removeClass('hover'); }); } $('#left').click(function(e) { $('table').text(''); if (currentDate.getMonth() === 0) { currentDate = new Date(currentDate.getFullYear() - 1, 11); generateCalendar(currentDate); } else { currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1) generateCalendar(currentDate); } e.preventDefault(); }); $('#right').click(function(e) { $('table').html('<tr></tr>'); if (currentDate.getMonth() === 11) { currentDate = new Date(currentDate.getFullYear() + 1, 0); generateCalendar(currentDate); } else { currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1) generateCalendar(currentDate); } e.preventDefault(); }); generateCalendar(currentDate); }); Not sure if needed, but I provided all the code. For the sake of my question lets say I have database table called "current_events" and I want to show all events on the calendar in a different color.