A full interactive Calendar UI built for Vanilla JS or use in other frontend frameworks.

#javascript #js #vanillajs #ui #frontend #webdev #website #html #css #jquery

igor.vaynberg 770f5ff0ba fix for Issue 235 - shrink calendar height if there is leftover space 15 yıl önce
build 61af0d3d84 now using closure compiler for minification 16 yıl önce
examples 8e934154b0 added external-dragging example, fixed drop this element 15 yıl önce
src 770f5ff0ba fix for Issue 235 - shrink calendar height if there is leftover space 15 yıl önce
tests 91e436dc0a pass native js event to select/unselect callbacks, final touches for 1.4.7 15 yıl önce
.gitignore 1fbb7f64cd modified gitignore for docs 16 yıl önce
GPL-LICENSE.txt 559928cec8 Settling into Git by including a markdown README file and updating the build process DATE variable. 16 yıl önce
MIT-LICENSE.txt 559928cec8 Settling into Git by including a markdown README file and updating the build process DATE variable. 16 yıl önce
Makefile a469d8d3c4 refactoring/bugfixes to selectable code. new methods: select/unselect. new options: unselectAuto/unselectCancel 15 yıl önce
README.mkd cef14c6415 renamed readme 16 yıl önce
changelog.txt 91e436dc0a pass native js event to select/unselect callbacks, final touches for 1.4.7 15 yıl önce
version.txt 8ebda5094f added droppable/drop, refactored selectable code, fixed issue 406 15 yıl önce

README.mkd

FullCalendar - Full-sized drag & drop event calendar

Development and testing

Modify files in the src/ directory and test your changes by viewing any of the HTML files in the tests/ directory. Each test file exercises a particular aspect of FullCalendar, so you might want to create your own test file if you are developing a substantial new feature.

Building from source

You must have a Java runtime environment (accessible by the java command) for minification. Then, run make zip and check the dist/ directory for your newly created ZIP archive. To start fresh, run the make clean command.

Getting started

Assuming you have downloaded a release, or built your own, you can get started by including the following dependencies in the <HEAD> of your HTML file:

<link rel='stylesheet' type='text/css' href='fullcalendar.css' />  <!-- required stylesheet          -->
<script type='text/javascript' src='jquery.js'></script>           <!-- need jQuery >= v1.2.6        -->
<script type='text/javascript' src='fullcalendar.min.js'></script> <!-- can also use fullcalendar.js -->

If you plan to use the drag/drop/resize functionality, you must include jQuery UI draggable and resizable. You can download a custom build or use the bundled files, like so:

<script type='text/javascript' src='ui.core.js'></script>
<script type='text/javascript' src='ui.draggable.js'></script>
<script type='text/javascript' src='ui.resizable.js'></script>

Somewhere in your javascript you need to initialize a FullCalendar within a pre-existing element. Here is an example of doing it within an element having an id of calendar:

$(document).ready(function() {

    $('#calendar').fullCalendar({
        // your options here
    });

});

To see a full list of all available options, please consult the FullCalendar documentation »