I can't implement date picker from Metronic in my html website. It return me with the error of '$(…).datepicker is not a function'. I have tried adding datepicker plugin throught those below but non of them work:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
or
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
My error starting at:
var demos = function () {
// minimum setup
$('#kt_datepicker_1, #kt_datepicker_1_validate').datepicker({
rtl: KTUtil.isRTL(),
todayHighlight: true,
orientation: "bottom left",
templates: arrows
});
Metronic datepicker template I use:
Metronic Keethemes datepicker
Related
I just created the most basic TimelineView under FullCalendar:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8' />
<link href='./fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
<link href="layout.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js'></script>
<script src='./fullcalendar/packages/core/main.js'></script>
<script src='./fullcalendar/packages/timegrid/main.js'></script>
<script src='./fullcalendar/packages/core/locales/fr.js'></script>
<script src='./fullcalendar/packages-premium/timeline/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-common/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timegrid/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timeline/main.js'></script>
<script src="./jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
<script>
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey:'',
plugins: ['resourceTimeline' ],
defaultView: 'resourceTimelineMonth'})
calendar.render();
</script>
The issue is that it renders a grey column in the 2nd place which I do not want
How to remove / hide this column ?
Thanks
You forgot to include the resource-timeline CSS file. I can't reproduce your problem with a standard Scheduler setup. Demo: https://codepen.io/ADyson82/pen/WNQyrzN
But if you remove that file then your problem starts to occur. Demo: https://codepen.io/ADyson82/pen/mdeKVLQ
I can also see that the relevant CSS file is missing from your code shown above. In your case I expect you need a link like this:
<link href='./fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />
The FullCalendar plugin index shows what JS and CSS file (if any) is needed for each plugin to work correctly.
I am using materialize in my Vue.js project I am having issues with displaying materialize's datepicker this is the code i have.
<form class="form">
...
<input type="text" class="datepicker" />
</form>
data() {
return {
date: null
};
},
mounted() {
$(document).ready(function() {
$(".datepicker").datepicker();
});
}
I am new to Vue.js so I apologize for the simplicity of my question So how do i get the datepicker to display and save it to a variable I have had the issue with materialize not displaying tabs properly also i don't know if i don't have something imported correctly. this is my html file.
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</script>
</body>
Looks like you forgot to load Materialize after jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I am using fullcalendar plugin and when i click a button it's passing event values to the calendar and calendar is displayed correctly. But when ever I click the button always a new calendar is displayed. I want to display only one calendar and it should display the passed event values accrodingly. please find the below code. Please note that I am not using any jquery libraries
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.calendarEl = "";
$scope.calendar = "";
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 08:00',
end: '2019-05-10 08:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
$scope.calendarEl = document.getElementById('calendar');
$scope.calendar = new FullCalendar.Calendar($scope.calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ]
});
$scope.calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
This can be achieved by using $scope.calendar.addEventSource('name_of_the_array_ofEvent_values')
I am currently experimenting with PubNub's EON Map library. It is a real-time mapping library that makes use of MapBox and PubNub's live data stream infrastructure.
I'm trying to build a simple PWA that publishes a string every time the location changes.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/geo-location/geo-location.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="stylesheet" type="text/css" href="../bower_components/mapbox.js/mapbox.css">
<script src="../bower_components/mapbox.js/mapbox.js"></script>
<script src="../bower_components/pubnub/dist/web/pubnub.min.js"></script>
<script src="../bower_components/eon-map/pubnub-mapbox.js"></script>
<!-- Instantiate PubNub -->
<script type="text/javascript">
console.log('Init PubNub');
var channel = 'pubnub-mapbox';
var pub = new PubNub({
publishKey: 'myPubKey',
subscribeKey: 'mySubKey',
logVerbosity: true
});
</script>
<dom-module id="my-view1">
<template>
<div id='map'></div>
<script type="text/javascript">
var map = eon.map({
pubnub: pub,
id: 'map',
mbToken: 'myToken',
mbId: 'myId',
channels: [channel]
});
</script>
</template>
<script>
Polymer({
is: 'my-view1',
});
The problem arises when the browser tries to instantiate the EON map. Even though there is a div element, I get this error message:
Uncaught Error: Map container not found.
at e._initContainer (leaflet-src.js:1979)
at e.initialize (leaflet-src.js:1532)
at e.initialize (map.js:37)
at new e (leaflet-src.js:229)
at Object.module.exports.map (map.js:233)
at new create (pubnub-mapbox.js:79)
at Object.window.eon.map (pubnub-mapbox.js:291)
at <anonymous>:2:19
at HTMLElement._createLocalRoot (polymer-mini.html:1998)
at HTMLElement._setupRoot (polymer-mini.html:1703)
I feel like I'm missing something very simple but I can't seem to catch my mistake. Any help would be greatly appreciated.
I was able to get eon-maps to render using the following:
Define a new eon-map element in eon.html page that contains the example code.
<link rel="stylesheet" type="text/css" href="./bower_components/mapbox.js/mapbox.css">
<script src="./bower_components/mapbox.js/mapbox.js"></script>
<script src="./bower_components/pubnub/dist/web/pubnub.min.js"></script>
<script src="./bower_components/eon-map/pubnub-mapbox.js"></script>
<dom-module id="eon-map">
<template>
<style type="text/css">
#map {
height: 200px;
}
</style>
<div id='map'></div>
</template>
<script>
Polymer({
is: 'eon-map',
ready: function() {
var channel = 'pubnub-mapbox';
var pub = new PubNub({
publishKey: 'your_pub_key',
subscribeKey: 'your_sub_key',
logVerbosity: true
});
var map = eon.map({
pubnub: pub,
id: 'map',
mbToken: 'your_mb_token',
mbId: 'your_mb_id',
channels: [channel],
debug: true
});
}
});
</script>
</dom-module>
Then, include eon.html in your root and use the eon-map element.
<link rel="import" href="./bower_components/polymer/polymer.html">
<!-- <link rel="import" href="shared-styles.html"> -->
<link rel="import" href="./bower_components/geo-location/geo-location.html">
<link rel="import" href="./bower_components/google-map/google-map.html">
<link rel="import" href="eon.html">
<eon-map></eon-map>
I'm migrating some code from Less to Stylus. In my code below, gulp-usemin compiles the Less files correctly, but I don't have it working with the Stylus files.
Source Files
gulpfile.js
var gulp = require('gulp'),
less = require('gulp-less'),
stylus = require('gulp-stylus'),
nib = require('nib'),
usemin = require('gulp-usemin');
gulp.task('usemin', function() {
return gulp.src('src/index.html')
.pipe(usemin({
less: [less()],
stylus: [stylus({use: nib(), compress: false})]
}))
.pipe(gulp.dest('dist/'));
});
index.html
<!-- build:less css/less.css -->
<link rel="stylesheet" type="text/css" href="foo.less">
<link rel="stylesheet" type="text/css" href="bar.less">
<!-- endbuild -->
<!-- build:stylus css/stylus.css -->
<link rel="stylesheet" type="text/css" href="foo.styl">
<link rel="stylesheet" type="text/css" href="bar.styl">
<!-- endbuild -->
foo.less
// This comment should disappear
html {
margin: 0;
}
bar.less
body {
background: #eee;
}
foo.styl
// This comment should disappear
html
margin: 0
bar.styl
body
background: #eee
Compiled Files
index.html
<link rel="stylesheet" href="css/less.css"/>
<link rel="stylesheet" href="css/stylus.css"/>
less.css
html {
margin: 0;
}
body {
background: #eee;
}
stylus.css
// This comment should disappear
html
margin: 0
body
background: #eee
As you can see, the Stylus files are concatenated, but not parsed at all. Am I using gulp-usemin correctly? Should I be using a different plugin?
There has not been much activity on this post, so I'll go ahead and answer myself.
Rather than continue down this path, I discovered the wonderful world of gulp-inject. The Stylus files are now compiling properly with the following code, but the great side effect is how everything gets injected cleanly into the html.
Source Files
index.html
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- components:css -->
<!-- bower installed css files will go here... -->
<!-- endinject -->
<!-- app:css -->
<!-- built css files will go here... -->
<!-- endinject -->
</head>
<body>
<!-- components:js -->
<!-- bower installed scripts will go here... -->
<!-- endinject -->
<!-- app:js -->
<!-- app scripts will go here... -->
<!-- endinject -->
</body>
</html>
gulpfile.js
var gulp = require('gulp'),
inject = require('gulp-inject'),
bower = require('main-bower-files'),
filter = require('gulp-filter'),
es = require('event-stream'),
stylus = require('gulp-stylus'),
concat = require('gulp-concat'),
cssFilter = filter('**/*.css'),
compileBower = function () {
return gulp.src(bower())
.pipe(cssFilter)
.pipe(gulp.dest('./app/components/css'))
.pipe(cssFilter.restore());
},
compileStylus = function () {
return gulp.src('./src/css/app.styl')
.pipe(stylus())
.pipe(concat('app.css'))
.pipe(gulp.dest('./app'));
},
compileJS = function () {
return gulp.src('./src/app/**/*.js')
.pipe(gulp.dest('./app'));
},
injectIndex = function () {
return gulp.src('./src/index.html')
.pipe(inject(compileBower(), {name: 'components'}))
.pipe(inject(es.merge(compileStylus(), compileJS()), {name: 'app'}))
.pipe(gulp.dest('./app'));
};
gulp.task('build', injectIndex);
Sample Compiled File
index.html
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/app/components/css/font-awesome.css"
<link rel="stylesheet" href="/app/components/css/bootstrap.css">
<link rel="stylesheet" href="/app/app.css">
</head>
<body>
<script src="/app/components/js/jquery.js"></script>
<script src="/app/components/js/bootstrap.js"></script>
<script src="/app/module/module.js"></script>
<script src="/app/app.js"></script>
</body>
</html>