Creating a javascript reservation calendar

Alla Fox
Alla Fox used Ask the Experts™
on
Hi Experts,
I am trying to implement a reservation calendar packages. I think I installed the libraries I need using npl  (although I did get some warnings as in the attached PDF "javascript calendar warnings") so maybe it

I created two files to see if I could get the calendar to work:
hello.html
booking-form.js

This does not work. I am very new to javascript (and honestly programming and computers in general) and i would really appreciate it if someone can look at these files and help me understand what I'm did wrong and how I can make this work. Thank you very much.

Alla
Javascript-calendar-warnings.pdf
hello.html
booking-form.js
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
To start, "Does not work" can mean many things.  More specifics would be best here.  Also, it will really be easier for us to assist you if you can create a test case/site on a public facing server. This will allow us to help you troubleshoot as we can't go by images or just code. The reason is your code by be perfect but something else is blocking the calendar from rendering as you expect.

Doing this on your own server is really going to be the best option to help you troubleshoot. The next best option is to use a playground site like codepen where you can include javascript and css files from the cdn https://cdnjs.com/libraries/fullcalendar.  See https://codepen.io/tag/fullcalendar/ for some examples.
Alla FoxStudent

Author

Commented:
Thanks Scott. Here is the URL on my university server. You can see it just renders a blank page with no discernible errors.

http://nova.umuc.edu/~ct386b12/javascript_sandbox/hello.html
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Ok, I see, your code is for building fullcalendar. https://fullcalendar.io/docs/initialize-es6

Look at the instructions here https://fullcalendar.io/docs/getting-started  Use either the "Download" or "CDN" option. That will be easier to get started.  If you choose the CDN option, you only need to include the js and css in your script tags.   See this page https://fullcalendar.io/docs/initialize-globals
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

    <script src='fullcalendar/core/main.js'></script>
    <script src='fullcalendar/daygrid/main.js'></script>

    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
      });

    </script>
  </head>
  <body>

    <div id='calendar'></div>

  </body>
</html>

Open in new window


If you use the CDN, you just need to use the full url on lines like
  <link href='fullcalendar/core/main.css' rel='stylesheet' />

Open in new window

Which will be
  <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.min.js' rel='stylesheet' />

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Alla FoxStudent

Author

Commented:
Scott, I am a little lost here. I see the list of files in the package on a CDN , for example here https://unpkg.com/browse/@fullcalendar/core@4.3.1/

and I can select the files into a collection for example here: https://www.jsdelivr.com/package/npm/@fullcalendar/core?tab=collection

but I can't figure out how to actually download the files and folders onto my laptop! It seems I have to download them into the same folder as my hello.html file, but I can't figure out how! A little more hand-holding please?
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
On the get started page, there is a link to download a zip file  https://github.com/fullcalendar/fullcalendar/releases/download/v4.3.1/fullcalendar-4.3.1.zip

Unzip that and you will see a bunch of examples in the examples folder.  Note that they are pulling files from the packages folder.

The month example has the following html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2019-08-12',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2019-08-01'
        },
        {
          title: 'Long Event',
          start: '2019-08-07',
          end: '2019-08-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-08-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-08-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2019-08-11',
          end: '2019-08-13'
        },
        {
          title: 'Meeting',
          start: '2019-08-12T10:30:00',
          end: '2019-08-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2019-08-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2019-08-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2019-08-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2019-08-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2019-08-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2019-08-28'
        }
      ]
    });

    calendar.render();
  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>

Open in new window


What you might want to do is have top level folders for
vendors
js
css
images

Then create a sub folder in your vendors file called fullcalendar. In the fullcalendar folder move the the packages folder as a subfolder.  Now update your html to
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='/vendors/fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='/vendors/fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
<script src='/vendors/fullcalendar/packages/core/main.js'></script>
<script src='/vendors/fullcalendar/packages/interaction/main.js'></script>
<script src='/vendors/fullcalendar/packages/daygrid/main.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2019-08-12',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2019-08-01'
        },
        {
          title: 'Long Event',
          start: '2019-08-07',
          end: '2019-08-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-08-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-08-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2019-08-11',
          end: '2019-08-13'
        },
        {
          title: 'Meeting',
          start: '2019-08-12T10:30:00',
          end: '2019-08-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2019-08-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2019-08-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2019-08-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2019-08-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2019-08-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2019-08-28'
        }
      ]
    });

    calendar.render();
  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>

Open in new window


Put any custom js in the js folder and your css in the css folder (keep the fullcalendar js and css were it is.  

I uploaded a zip file with one example and this will work on your local file system.  Notice I removed the beginning slash. Going live, I would add that back so your links are absolute and will work in any route.
calander.zip
Alla FoxStudent

Author

Commented:
Scott, thank you so so so much!!! It is really helpful for me.
Alla FoxStudent

Author

Commented:
you rock, thanks Scott! I got the calendar working on my assignment.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial