Menu
This feels so basic that no one bothers to explain it. I'm trying to use the fullcalendar library in my app. In their documentation under «Basic Usage», I found this:
The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar, jQuery, and Moment JavaScript files, in the of your page:
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> <script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script> <script src='fullcalendar/fullcalendar.js'></script>
And under «Download», it says this:
You can install FullCalendar via NPM:
$ npm install fullcalendar
What I don't understand is, where do I find the fullcalendar.css, jquery.min.js, moment.min.js and fullcalendar.js files to include?
NPM install doesn't download a directory into my downloads directories that I can drag into my project, it adds files to my node_modules directory, and I doubt I'm supposed to go rummaging in there for the files (my node_modules directory has thousands of directories in it). I tried using Webpack to bundle the js files, thinking it might automatically include them in the bundle, but that didn't work. What am I missing?
456
You don't need to have any of the script tags or stylesheet links in the header if you use Webpack, with this webpack.config.js:
module.exports = {
entry: "./calendar.js",
output: { filename: "bundle.js" },
module: {
loaders: [
{
test: [/.js?$/],
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
};
And you need to npm install babel. And if you want Webpack to handle your CSS files for you too, you can npm install style-loader and css-loader. Here's my package.json:
{
"name": "full_calendar_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"css-loader": "^0.26.1",
"fullcalendar": "^3.1.0",
"jquery": "^3.1.1",
"moment": "^2.17.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Then my index.html file doesn't need the script tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src='bundle.js'></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
And I just include the packages in my JavaScript file:
import $ from 'jquery'
import 'fullcalendar'
import 'fullcalendar/dist/fullcalendar.css'
$(document).ready(() => {
$('#calendar').fullCalendar()
})
I'm still looking for a way to clean up the way I import the CSS file, but at least I don't have an HTML file that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel='stylesheet' href='node_modules/fullcalendar/dist/fullcalendar.css' />
<script src='node_modules/jquery/dist/jquery.min.js'></script>
<script src='node_modules/moment/min/moment.min.js'></script>
<script src='node_modules/fullcalendar/dist/fullcalendar.js'></script>
<script src='entry.js'></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Please let me know how to include the CSS file more cleanly.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With