Pereiti prie turinio

PHP ir JS kalendorius


Rekomenduojami pranešimai

Sveiki,

gal kas patarsite kaip pakeisti JS kodą, jog veiktu norimas dalykas.

 

Esmė tame jog naudoju šį kalendorių (Mano nuoroda) tačiau jis nuskaito iš mysql pagal vieną datą stulpelyje. Pvz: langelyje datą yra: 2018-01-01 ir ją pažymį kalendoriuje ir atvaizduoja "Title".

 

Bet esmė tokia jog langelyje datų daugiau

 

3c68578cdd730fafb23f47c5b22ccd13945.PNG

 

Kaip pakeisti JS kodą jog pažymėtų visas langelyje 1rašytas datas kalendoriuje ir pridėtų tą patį TITLE?

 

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="fullcalendar/fullcalendar.min.css" />
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>

<script>

$(document).ready(function () {
   var calendar = $('#calendar').fullCalendar({
       editable: true,
       events: "fetch-event.php",
       displayEventTime: false,
       eventRender: function (event, element, view) {
           if (event.allDay === 'true') {
               event.allDay = true;
           } else {
               event.allDay = false;
           }
       },
       selectable: true,
       selectHelper: true,
       select: function (start, end, allDay) {
           var lesson = prompt('Event lesson:');

           if (lesson) {
               var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
               var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");

               $.ajax({
                   url: 'add-event.php',
                   data: 'lesson=' + lesson + '&start=' + start + '&end=' + end,
                   type: "POST",
                   success: function (data) {
                       displayMessage("Added Successfully");
                   }
               });
               calendar.fullCalendar('renderEvent',
                       {
                           lesson: lesson,
                           start: start,
                           end: end,
                           allDay: allDay
                       },
               true
                       );
           }
           calendar.fullCalendar('unselect');
       },

       editable: true,
       eventDrop: function (event, delta) {
                   var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                   var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                   $.ajax({
                       url: 'edit-event.php',
                       data: 'lesson=' + event.lesson + '&start=' + start + '&end=' + end + '&id=' + event.id,
                       type: "POST",
                       success: function (response) {
                           displayMessage("Updated Successfully");
                       }
                   });
               },
       eventClick: function (event) {
           var deleteMsg = confirm("Do you really want to delete?");
           if (deleteMsg) {
               $.ajax({
                   type: "POST",
                   url: "delete-event.php",
                   data: "&id=" + event.id,
                   success: function (response) {
                       if(parseInt(response) > 0) {
                           $('#calendar').fullCalendar('removeEvents', event.id);
                           displayMessage("Deleted Successfully");
                       }
                   }
               });
           }
       }

   });
});

function displayMessage(message) {
    $(".response").html("<div class='success'>"+message+"</div>");
   setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>

<style>
body {
   margin-top: 50px;
   text-align: center;
   font-size: 12px;
   font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
   width: 700px;
   margin: 0 auto;
}

.response {
   height: 60px;
}

.success {
   background: #cdf3cd;
   padding: 10px 60px;
   border: #c3e6c3 1px solid;
   display: inline-block;
}
</style>
</head>
<body>
   <h2>PHP Calendar Event Management FullCalendar JavaScript Library</h2>

   <div class="response"></div>
   <div id='calendar'></div>
</body>


</html>

Nuoroda į pranešimą
Dalintis kituose puslapiuose
  • po 1 mėnesio...

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Sukurti naują...