locked
Newbie JQuery question RRS feed

  • Question

  • User-2060727494 posted

    I'm brand new to JQuery.  I have been using ASP.Net and C# for many years though.

    I want to use the calendar control I found.  I downloaded it from this site:

    http://fullcalendar.io/

    Since I'm new to JQuery, I'm having a tough time getting started.  Here is what I have done so far:

    1. Created a new web page named HRCalendar.aspx.

    2. Downloaded the JQuery zip file from the above web site and unzipped the file.

    3. I'm using Visual Studio 2013 and it looks like I already have the JQuery folder.

    4. Here is some code I put in HRCalendar.aspx:

    <form id="form1" runat="server" >
            <asp:ScriptManager ID="sm" runat="server">
            </asp:ScriptManager>
            <div class="container">
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#calendar').fullCalendar({
                            theme: true,
                            header: {
                                left: '',
                                center: '',
                                right: ''
                            },
                            defaultView: 'agendaDay',
                            editable: false,
                            events: "/Calendar/GetEvents/"
                        });
                    });
                </script>
    
                <script src="../../Scripts/fullcalendar/fullcalendar.js" type="text/javascript"></script>
                <table align="center" style="text-align:left">
                            <tr>
                                <td>
                                    <div id="calendar"></div>                                           
                                </td>
                            </tr>
                 </table>
            </div>

    When I run this web page, I just get a blank page.  Like I said, I'm brand new to JQuery and this is my first attempt to use it.  Can anyone help push me along?  I think if I could at least get this calendar control to display on my web page then I could probably get it working.

    I basically want to use a calendar control to display vacation data which resides in my SQL database.  

    Monday, March 7, 2016 6:58 PM

Answers

  • User2103319870 posted

    <script src="../../Scripts/fullcalendar/fullcalendar.js" type="text/javascript"></script>

    You are adding js files for FullCalendar. FullCalendar plugin depends on Moment js plugin. You need to add the necessary js files for that plugin also like below

      <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
        <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/locales.min.js"></script>
    
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js" type="text/javascript"></script>

    Complete code

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
        <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/locales.min.js"></script>
    
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js" type="text/javascript"></script>
       <script type='text/javascript'>
    
    	$(document).ready(function() {
    		
    		$('#calendar').fullCalendar({
    			header: {
    				left: '',
    				center: '',
    				right: ''
    			},
    			defaultDate: '2016-03-12',
    			defaultView: 'agendaDay',
    			editable: true,
    			events: [
    				{
    					title: 'All Day Event',
    					start: '2016-03-12'
    				},
    				{
    					title: 'Long Event',
    					start: '2016-03-12',
    					end: '2016-03-12'
    				},
    				{
    					title: '2 Hour Meeting',
    					start: '2016-03-12T10:30:00',
    					end: '2016-03-12T12:30:00'
    				},
    				{
    					title: 'Lunch',
    					start: '2016-03-12T12:00:00'
    				},
    				{
    					title: 'Birthday Party',
    					start: '2016-03-12T07:00:00'
    				}
    			]
    		});
    		
    	});
    
    </script>
    <style type='text/css'>
    
    	body {
    		margin-top: 40px;
    		text-align: center;
    		font-size: 14px;
    		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    	}
    
    	#calendar {
    		width: 900px;
    		margin: 0 auto;
    	}
    
    </style>
    </head>
    <body>
      <table align="center" style="text-align:left">
                            <tr>
                                <td>
                                    <div id="calendar"></div>                                           
                                </td>
                            </tr>
                 </table>
    </body>
    </html>
    

    You can get more details from the documentation of FullCalendar plugin : http://fullcalendar.io/docs/usage/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 7, 2016 10:01 PM

All replies

  • User-718146471 posted

    This is a common error that many make when they first work with JQuery. You have to load the jquery library itself first, then any corresponding jquery scripts immediately following. Then in your code you can reference those new scripts you have loaded previously. Best idea is load them in your masterpage so you have them there and do not have to worry about loading them over and over again.

    Monday, March 7, 2016 8:16 PM
  • User2103319870 posted

    <script src="../../Scripts/fullcalendar/fullcalendar.js" type="text/javascript"></script>

    You are adding js files for FullCalendar. FullCalendar plugin depends on Moment js plugin. You need to add the necessary js files for that plugin also like below

      <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
        <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/locales.min.js"></script>
    
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js" type="text/javascript"></script>

    Complete code

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
        <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/locales.min.js"></script>
    
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js" type="text/javascript"></script>
       <script type='text/javascript'>
    
    	$(document).ready(function() {
    		
    		$('#calendar').fullCalendar({
    			header: {
    				left: '',
    				center: '',
    				right: ''
    			},
    			defaultDate: '2016-03-12',
    			defaultView: 'agendaDay',
    			editable: true,
    			events: [
    				{
    					title: 'All Day Event',
    					start: '2016-03-12'
    				},
    				{
    					title: 'Long Event',
    					start: '2016-03-12',
    					end: '2016-03-12'
    				},
    				{
    					title: '2 Hour Meeting',
    					start: '2016-03-12T10:30:00',
    					end: '2016-03-12T12:30:00'
    				},
    				{
    					title: 'Lunch',
    					start: '2016-03-12T12:00:00'
    				},
    				{
    					title: 'Birthday Party',
    					start: '2016-03-12T07:00:00'
    				}
    			]
    		});
    		
    	});
    
    </script>
    <style type='text/css'>
    
    	body {
    		margin-top: 40px;
    		text-align: center;
    		font-size: 14px;
    		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    	}
    
    	#calendar {
    		width: 900px;
    		margin: 0 auto;
    	}
    
    </style>
    </head>
    <body>
      <table align="center" style="text-align:left">
                            <tr>
                                <td>
                                    <div id="calendar"></div>                                           
                                </td>
                            </tr>
                 </table>
    </body>
    </html>
    

    You can get more details from the documentation of FullCalendar plugin : http://fullcalendar.io/docs/usage/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 7, 2016 10:01 PM
  • User61956409 posted

    Hi bobh0526,

    Firstly, as a2h said, you could refer to the following link to learn the basic usage of FullCalendar plugin.

    http://fullcalendar.io/docs/usage/

    Besides, you could check whether there are any JavaScript error in F12 developer tools Console tab.

    Best Regards,

    Fei Han

    Tuesday, March 8, 2016 5:32 AM