Calendar with PHP, JavaScript and AJAX

Question

Calendar with PHP, JavaScript and AJAX

Navigation

#1 by (0 votes)

1

I need to make a code that reads the date that the user selects, through a calendar made with Boostrap, the detail is that I can not find a way to achieve my goal. Annex code that I currently carry:

Bring calendar data:

function calendar(){
    var mes = document.getElementByID('month');
    var contenido-mes = parrafo.innerHTML;
    var dia = document.getElementByClass('day-contents');
    var contenido-dia = parrafo.innerHTML;
}

AJAX incomplete function:

function iniciar(){
    if(window.XMLHttpRequest)
        peticionHTTP = new XMLHttpRequest();
    else peticionHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
 function peticion(url, metodo, funcion){
    peticionHTTP.onReadyStateChange = funcion;
    peticionHTTP.open(metodo, url, true);
    peticionHTTP.send(null);
}

Calendar Code:

<div class="col_1">
        <div class="col-md-4 span_7">   
          <div class="cal1 cal_2">
            <div class="clndr">
                <div class="clndr-controls">
                    <div class="clndr-control-button">
                        <p class="clndr-previous-button">previous</p>
                    </div>
                    <div id="month" class="month">July 2015</div>
                    <div class="clndr-control-button rightalign">
                        <p class="clndr-next-button">next</p>
                    </div>
                </div>
                    <table class="clndr-table" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr class="header-days">
                                <td class="header-day">S</td>
                                <td class="header-day">M</td>
                                <td class="header-day">T</td>
                                <td class="header-day">W</td>
                                <td class="header-day">T</td>
                                <td class="header-day">F</td>
                                <td class="header-day">S</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="day adjacent-month last-month calendar-day-2015-06-28">
                                    <div onclick="iniciar()" class="day-contents">28</div>
                                </td>
                                <td class="day adjacent-month last-month calendar-day-2015-06-29">
                                    <div onclick="iniciar()" class="day-contents">29</div>
                                </td>
                                <td class="day adjacent-month last-month calendar-day-2015-06-30">
                                    <div onclick="iniciar()" class="day-contents">30</div>
                                </td>
                                <td class="day calendar-day-2015-07-01">
                                    <div onclick="iniciar()" class="day-contents">1</div>
                                </td>
                                <td class="day calendar-day-2015-07-02">
                                    <div onclick="iniciar()" class="day-contents">2</div>
                                </td>
                                <td class="day calendar-day-2015-07-03">
                                    <div onclick="iniciar()" class="day-contents">3</div>
                                </td>
                                <td class="day calendar-day-2015-07-04">
                                    <div onclick="iniciar()" class="day-contents">4</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-05">
                                    <div onclick="iniciar()" class="day-contents">5</div>
                                </td>
                                <td class="day calendar-day-2015-07-06">
                                    <div onclick="iniciar()" class="day-contents">6</div>
                                </td>
                                <td class="day calendar-day-2015-07-07">
                                    <div onclick="iniciar()" class="day-contents">7</div>
                                </td>
                                <td class="day calendar-day-2015-07-08">
                                    <div onclick="iniciar()" class="day-contents">8</div>
                                </td>
                                <td class="day calendar-day-2015-07-09">
                                    <div onclick="iniciar()" class="day-contents">9</div>
                                </td>
                                <td class="day calendar-day-2015-07-10">
                                    <div onclick="iniciar()" class="day-contents">10</div>
                                </td>
                                <td class="day calendar-day-2015-07-11">
                                    <div onclick="iniciar()" class="day-contents">11</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-12">
                                    <div onclick="iniciar()" class="day-contents">12</div>
                                </td>
                                <td class="day calendar-day-2015-07-13">
                                    <div onclick="iniciar()" class="day-contents">13</div>
                                </td>
                                <td class="day calendar-day-2015-07-14">
                                    <div onclick="iniciar()" class="day-contents">14</div>
                                </td>
                                <td class="day calendar-day-2015-07-15">
                                    <div onclick="iniciar()" class="day-contents">15</div>
                                </td>
                                <td class="day calendar-day-2015-07-16">
                                    <div onclick="iniciar()" class="day-contents">16</div>
                                </td>
                                    <td class="day calendar-day-2015-07-17">
                                        <div onclick="iniciar()" class="day-contents">17</div>
                                </td>
                                    <td class="day calendar-day-2015-07-18">
                                        <div onclick="iniciar()" class="day-contents">18</div>
                                </td>
                                </tr>
                                    <tr>
                                        <td class="day calendar-day-2015-07-19"><div onclick="iniciar()" class="day-contents">19</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-20"><div onclick="iniciar()" class="day-contents">20</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-21">
                                        <div onclick="iniciar()" class="day-contents">21</div>
                                </td>
                                    <td class="day calendar-day-2015-07-22">
                                        <div onclick="iniciar()" class="day-contents">22</div>
                                </td>
                                    <td class="day calendar-day-2015-07-23">
                                        <div onclick="iniciar()" class="day-contents">23</div>
                                </td>
                                    <td class="day calendar-day-2015-07-24">
                                        <div onclick="iniciar()" class="day-contents">24</div>
                                </td>
                                    <td class="day calendar-day-2015-07-25">
                                        <div onclick="iniciar()" class="day-contents">25</div>
                                </td>
                                </tr><tr><td class="day calendar-day-2015-07-26">
                                        <div onclick="iniciar()" class="day-contents">26</div>
                                </td><td class="day calendar-day-2015-07-27">
                                        <div onclick="iniciar()" class="day-contents">27</div>
                                </td><td class="day calendar-day-2015-07-28">
                                        <div onclick="iniciar()" class="day-contents">28</div>
                                </td><td class="day calendar-day-2015-07-29">
                                        <div onclick="iniciar()" class="day-contents">29</div>
                                </td><td class="day calendar-day-2015-07-30">
                                        <div onclick="iniciar()" class="day-contents">30</div></td><td class="day calendar-day-2015-07-31">
                                        <div onclick="iniciar()" class="day-contents">31</div>
                                </td><td class="day adjacent-month next-month calendar-day-2015-08-01">
                                        <div onclick="iniciar()" class="day-contents">1</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

Thank you.

javascript php ajax

asked by Luis Rivera 20.08.2018 в 00:43

source

1 answer

The report only prints what is shown in the table I have an error of type "Uncaught Error" in a login in php

score 0 · Answer 1

I do not know how you are doing the calendar because you do not say it, if it is a fullCalendar it has specific functions for it, but if you have more control over the calendar, you could add the attribute to the td or to the same div to handle the dates , something like this:

$(function(){
    $(".day-contents").click(function(){
        var fecha = $(this).parent('td').attr('data-date');
        alert(fecha);
    })
})

.day-contents{
  width:50px;
  height:50px;
  cursor:pointer;
  background-color:#1399c1;
  color:#ffffff;
  padding: 20px;
}
.day-contents:hover{
  background-color:#012530;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="day calendar-day-2015-07-18" data-date="2015-07-18">
            <div class="day-contents">18</div>
        </td>
    </tr>
</table>

There you can appreciate that by clicking on the div, we get the date of the data-date attribute of the td, as I mentioned you can do the same thing more directly by handling this attribute in the same div.