javascript - Load events on FullCalendar upon datepicker selection not working -
i wanna click '+' button in dates in fullcalendar cell go jsp page add events have datepicker. whatever date set in jsp page , must show data in cell. in case title. if pick 4th feb 2017 in datepicker , fill other inputs in form such title, description , on..it should retrieve , display in specific cell of date.
index.jsp:
<%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <%@page import="model.addevents,java.util.arraylist,java.util.listiterator" %> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <script type="text/javascript" src= "https://code.jquery.com/jquery-3.2.1.min.js"> var checkin = jquery('#startdate').fdatepicker({ format: "dd.mm.yyyy", }).data('datepicker'); var checkout = jquery('#enddate').fdatepicker({ format: "dd.mm.yyyy", }).on('changedate', function(ev) { var startdate = new date(ev.date); $('#calendar').fullcalendar('gotodate', startdate);//modify date of full calendar }).data('datepicker'); $(document).ready(function() { var date = new date(); var d = date.getdate(); var m = date.getmonth(); var y = date.getfullyear(); var events_array = [ { title: 'test1', start: new date(2012, 8, 20), tip: 'personal tip 1'}, { title: 'test2', start: new date(2012, 8, 21), tip: 'personal tip 2'} ]; $('#calendar').fullcalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaweek,agendaday' }, selectable: true, events: events_array, eventrender: function(event, element) { element.attr('title', event.tip); }, }); $(".fc-header-left").hide(); $(".fc-header-right").hide(); $(window).scroll(function() { if ($(this).scrolltop() > 1){ $('.fc-border-separate thead').addclass("sticky"); } else{ $('.fc-border-separate thead').removeclass("sticky"); } }); </script> <title>calendar</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" /> </head> <body> <a class= "add_event_label" href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea"></a> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1>calendar</h1> <br /> <div id="bootstrapmodalfullcalendar"></div> </div> </div> </div> <!-- pop window when press button --> <div id="fullcalmodal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button> <h4 id="modaltitle" class="modal-title"></h4> </div> <div id="modalbody" class="modal-body"> </div> <!-- <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <a class="btn btn-primary" id="eventurl" target="_blank">event page</a> </div>--> </div> </div> </div> <script src="https://code.jquery.com/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('#bootstrapmodalfullcalendar').fullcalendar({ header: { left: '', center: 'prev title next', right: '' }, //action after calendar loaded eventafterallrender: function(view){ if(view.name == 'month') { //loop .fc-day elements $('.fc-day').each(function(){ //jquery styling $(this).css({ 'font-weight': 'bold', 'font-size': '100%'}); $(this).css('position','relative'); //add elements each .fc-day, can modify content in append() own html button code $(this).append('<a class="add_event_label" href ="addevent.jsp" style="position:absolute;bottom:0;left:0;right:0;display:block;font-size:12px;color:blue;cursor:pointer;">(+)</a>' ); <%!arraylist<addevents> myeventlist; //have declear in declaration tag access in page %> <% myeventlist = (arraylist<addevents>) request.getattribute("eventlist"); if(myeventlist.size() == 0) { %> <h2>no events</h2> <% } else { %> <% listiterator<addevents> li = myeventlist.listiterator(); while(li.hasnext()) { addevents myevent = new addevents(); myevent= (addevents)li.next(); %> $(this).append('<p>title:</p><p><%= myevent.gettitle() %></p></p>'); <%} %> <% } %> }); } }, eventclick: function(event, jsevent, view) { //$(".fc-day-number").prepend("(+) "); $('#modaltitle').html(event.title); $('#modalbody').html(event.description); $('#eventurl').attr('href',event.url); $('#fullcalmodal').modal(); return false; } }) }) </script> </body> <input id='eventid' type="hidden" name="hiddevent" value=""> </html> retrieveservlet:
package servlet; import java.io.ioexception; import java.util.arraylist; import javax.servlet.servletexception; import javax.servlet.annotation.webservlet; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import javax.servlet.http.httpsession; import database.dbao; import model.addevents; /** * servlet implementation class retrieveservlet */ @webservlet("/retrieveservlet") public class retrieveservlet extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public retrieveservlet() { super(); // todo auto-generated constructor stub } /** * @see httpservlet#doget(httpservletrequest request, httpservletresponse response) */ protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub //response.getwriter().append("served at: ").append(request.getcontextpath()); dopost(request,response); //dispatcher sents deget request, since ur code in dopost, u need it. } /** * @see httpservlet#dopost(httpservletrequest request, httpservletresponse response) */ protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { try { dbao mydatabase = new dbao(); arraylist <addevents> myeventlist = mydatabase.getaddevents(); system.out.println(myeventlist.size()); request.setattribute("eventlist",myeventlist); request.getrequestdispatcher("index.jsp").forward(request, response); }catch(exception ex) { system.out.println("error accessing database:" +ex.getmessage()); } } } addevent.jsp:
<%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1" %> <%@ page import ="model.addevents,model.user,java.util.arraylist,java.util.listiterator" %> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <script> function myfunction() { document.getelementbyid("mytime").value = "22:53:05"; } function mysubmitfunction() { alert("you added event"); } </script> </head> <body> <h1 align="center">add event</h1> <form action="addeventsservlet" method="post" onsubmit="mysubmitfunction()"> <table align="center" border= "10px" cellpadding="10"> <tr> <td> <label>title :</label><input type="text" name="title" required> </td> </tr> <tr> </tr> <tr> <td> <label>details:</label><textarea rows="4" cols="15" name="eventdesc"></textarea> <div style="border:solid 2px red;"> <div id='calendar'></div> </div> <div class="tag hide" id="cal-info"> </div> </td> </tr> <tr> <td> start date:<input type="text" id="startdate" name="datepicker" class="input_text" value=""> </td> </tr> <tr> <td> end date:<input type="text" id="enddate" name="datepicker" class="input_text" value=""> </td> </tr> <tr> <td> start time:<input type="time" id="mytime" name="starttime"> </td> </tr> <tr> <td> end time:<input type="time" id="mytime" name="endtime"> </td> </tr> <tr> <td> approximate budget:<input type="text" id="budget" name="budget"> </td> </tr> <!-- <tr> <td> transportation:<select name="transportation" name="transportation"> <option value="bus">bus</option> <option value="mrt">mrt</option> <option value="cab">cab</option> <option value="walk">walk</option> </select> </td> </tr>--> <!-- -<tr> <td> environment: <input type="radio" name="indoor" value="indoor" name="environment"> indoor <input type="radio" name="outdoor" value="outdoor">outdoor<br> </td> </tr> <tr>--> <tr> <!-- went retrieve servlet instead of addeventsservlet, won create event --> <td><input class = 'btnsel' type="submit" name="btnaddview" value="add" onclick="form.action='addeventsservlet';"> <button type="reset" value="reset">reset</button></td></tr> </table> <input id ='eventid' type="hidden" name ="hiddevent" value=""> <a href="index.jsp"> <img border="0" alt="w3schools" src="cal.jpg" width="50" height="50"> </a> </form> </body> </html>
what think should create function
function changedate() { var startdate = $('#id-of-your-element-of-the-date-picker').val(); $('#calendar').fullcalendar('gotodate', startdate); } create on change event $('#id-of-your-element-of-the-date-picker').onchange(changedate);
this should rerender events in case have @ date range. hope helps.
Comments
Post a Comment