how do i save this events even after refreshing the page in fullcalender.js
this events after refreshing sets back to its location
and does not update .
as events are switched to another date after refresh they sill font update
after which file should i write in to make this changes and what should i write to make this changes
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2018-05-15',
selectable: true,
editable: true,
events: [
{
title: 'Meeting',
start: '2018-05-15T10:30:00',
end: '2018-05-15T12:30:00'
},
{
title: 'Lunch',
start: '2018-05-15T12:00:00'
},
{
title: 'Meeting',
start: '2018-05-15T14:30:00'
},
{
title: 'Tea Hour',
start: '2018-05-15T17:30:00'
},
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
To persist your changes you will need to use a database. Fullcalendar only provides only the functionality, not the persistence.
Another workaround without a Database would be the use of localStorage. There you can store the events client-sided and check if if events are stored in the localStorage. If there are stored events, apply them to the calendar.
But you can not store an event and see it on another client without a database.
Related
I use the nice FormBuilder from Kevin Chappell
https://formbuilder.online/docs/
Several types can be defined for the 'text' field. I have integrated the new control 'time'. I now want if this new control is clicked, 'time' should be preset in the 'Type' field.
How can i adjust that?
PS: The code example does not run here but only locally (sessionStorage topic)
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'text'
},
icon: '🕑'
}],
subtypes: {
text: ['datetime-local','time']
},
disabledSubtypes: {
text: ['password','email','color','tel'],
}
};
$(fbTemplate).formBuilder(options);
});
body {
background: lightgrey;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - formBuilder: Options -> subtypes</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="fb-editor"></div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script><script src="./script.js"></script>
</body>
</html>
I didn't find out, but i took a different path for it. :-)
Enter the new element as type time in the field definition.
A new subtype time has also been defined.
Then add the time in the controls register.
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'time'
},
icon: '🕑'
}],
subtypes: {
time: ['time']
}
};
$(fbTemplate).formBuilder(options);
});
// src/js/control/text.js
// register this control for the following types & text subtypes
control.register(['text', 'file', 'date', 'number', 'time'], controlText)
control.register(['text', 'password', 'email', 'color', 'tel'], controlText, 'text')
body {
background: lightgrey;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>formBuilder</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="fb-editor"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
Whenever you update the content of a jquery-ui tooltip while the hide-animation is running, it'll pop back into visibility and enter some broken state where it is visible forever and unresponsive to events.
Yeah, i know, i know, the lib is dead.
Still, is there any way to get around this bug? I need to update my tooltip in 1 second intervals because it has a timer in it, and I would like to use a fade-out animation somehow.
Demo:
Just move the mouse in and out of the first block a couple of times:
$("#animated").tooltip( {items: "div", content: ""} );
$("#not-animated").tooltip( {items: "div", hide: false, content: ""} );
setInterval( function() {
$("#animated").tooltip("option", "content", Math.random().toFixed(3));
$("#not-animated").tooltip("option", "content", Math.random().toFixed(3));
}, 500 );
.item {
display: inline-block;
background-color: DeepSkyBlue;
padding: 12px;
}
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>
</body>
</html>
You could try updating the .ui-tooltip-content element manually.
$(function() {
function getRandom() {
return Math.random().toFixed(3);
}
function updateContent() {
$(".ui-tooltip-content", $("#animated").tooltip("widget")).html(getRandom());
$("#not-animated").tooltip("option", "content", getRandom());
}
$("#animated").tooltip({
items: "div",
hide: 200,
content: getRandom
});
$("#not-animated").tooltip({
items: "div",
hide: false,
content: getRandom
});
var intv = setInterval(updateContent, 500);
});
.item {
display: inline-block;
background-color: DeepSkyBlue;
padding: 12px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>
I neede to customize labels (like a bubbletalk) of a kendo line chart.
I build a template (like in this kendo test: http://dojo.telerik.com/#PMcDonou/URiZA. I took this demo from an admin solution in a kendo forum thread) and it work when load the page first time, but in some situations kendo UI not render the labels.
The problem appears in this two cases:
When I refresh manually chart with a button that to click on it you need to
scroll the page.
When i refresh the page(F5) after that i scrolled down the page.
I noticed that the position of the labels moves upwards based on the offset from top given by scrolling.
I did this fiddle for you to see the first case.
For see an example of the second case look the fiddle in a full screen page, try to scroll down and refresh the page(F5) and try this in multiple positions of scroll. Thank you for attention and help me please.
function createChart(){
var dataSource = new kendo.data.DataSource({
data: [{
category: "A", value: 10
}, {
category: "B", value: 20
}, {
category: "C", value: 30
}]
});
var labelTemplate = kendo.template($("#labelTemplate").html());
$("#chart").kendoChart({
dataSource: dataSource, series: [{
type: "line", style: "smooth", field: "value", categoryField: "category", labels: {
visible: true, template: "#= category #", visual: function(e) {
var dataItem = $.grep(dataSource.data(), function(item) {
return item.category === e.text;
})[0];
// Label origin position (same as where the original label would be)
var origin = e.rect.origin;
var content = $('<div/>')
.css({
position: "absolute",
font: "11px Arial,Helvetica,sans-serif",
left: 0,
top: 0
})
.appendTo(document.body)
.html(labelTemplate(dataItem));
var visual = new kendo.drawing.Group();
kendo.drawing.drawDOM(content).done(function(group) {
// Place drawn shapes on original label position
group.transform(kendo.geometry.transform().translate(origin.x, origin.y));
visual.append(group);
// Remove element from DOM
content.remove();
});
return visual;
}
}
}]
});
}
$(function(){
createChart();
$("#refreshChart").on("click", function(){
$("#chart").data("kendoChart").refresh();
})
});
.talk-bubble {
width: auto;
height: auto;
background-color: red;
color: white;
border-radius: 30px;
}
.talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
}
.talktext p {
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<!-- Div for chart -->
<div id="chart"></div>
<!-- Example div container -->
<h1>Go down and click button</h1>
<div style="height:3000px; background-color: yellow;"></div>
<!-- Button that refresh chart -->
<h3>Click button</h3>
<button type="button" id="refreshChart">Refresh chart</button>
<h1>Now go up, label not rendered</h1>
<!-- Label Template Custom -->
<script id="labelTemplate" type="text/x-kendo-template">
<div class="talk-bubble">
<div class="talktext">
<p>Value: #= kendo.format('{0:n2}', data.value) #</p>
</div>
</div>
</script>
</body>
</html>
I am having trouble with the FullCalendar js library not displaying events correctly. I'm not sure what the issue is as I have followed the instructions on their introduction page, but the events are always displayed at the very bottom of the calendar and are never 'inline' with the times.
<html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
<!--<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.print.css" type="text/css">-->
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js"></script>
<script>
moment().format();
function httpGet(url) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
$(document).ready(function () {
// page is now ready, initialize the calendar...
//var eventsArray = JSON.parse(httpGet("Schedule.php"));
$('#calendar').fullCalendar({
// put your options and callbacks here
//timezone: 'America/Denver',
header: {
left: '',
center: 'title',
right: ''
},
theme:true,
events: [
{
"title":"Washer & Dryer",
"editable":false,
"start":"2017-04-09T00:30:00-0600",
"end":"2017-04-09T06:30:00-0600",
"img_loc":"washer.png"
},
{
"title":"Dishwasher",
"editable":false,
"start":"2017-04-09T02:56:00-0600",
"end":"2017-04-09T04:56:00-0600",
"img_loc":"dishwasher.jpg"
}
],
defaultView: "agendaDay"
})
});
</script>
<style type='text/css'>
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
You need to use an href attribute instead of an src in the <link> tag that references the fullcalendar stylesheet. Your fourth line should look like this:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
Demo:
http://jsbin.com/tojohiwuke/1/edit?html,output
(I also changed jquery to use a CDN in my example.)
I have a paper slider in my index.php page. I am able to get the real time value of paper slider and display its value in input type=text... of form ,textarea... and div.
What i want is to echo the real time of values of this slider in another php page.for eg: value.php
Is there any way I can do it?
I will be very grateful.
Here is my Code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>paper-input</title>
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
<link href="https://www.polymer-project.org/0.5/components/paper-slider/paper-slider.html" rel="import">
<link href="https://www.polymer-project.org/0.5/components/font-roboto/roboto.html" rel="import">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
<style shim-shadowdom>
body{
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
}
paper-slider {
width: 100%;
}
section {
max-width: 1000px;
padding: 20px 0;
background-color: #f0f0f0;
}
section > div {
padding: 14px;
}
.yellow-slider paper-slider::shadow #sliderKnobInner,
.yellow-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #f4b400;
}
.green-slider paper-slider::shadow #sliderKnobInner,
.green-slider paper-slider::shadow #sliderKnobInner::before,
.green-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
#ratingsLabel {
padding-left: 12px;
color: #a0a0a0;
}
</style>
</head>
<body>
<div id="valueslide"></div>
<form role="form" method="POST">
<textarea id="mytextarea" name="slider">Text to be changed</textarea>
</form>
<table>
<!--tr specifies a new row-->
<tr>
<td>Value</td>
<td><input type=text id='firstNumber' value=''></td>
</tr>
</table>
<template is="auto-binding">
<paper-slider on-immediate-value-change="{{sliderChange}}" min="0" max='100' pin immediateValue="{{sliderValue}}"></paper-slider>
</template>
</body>
<script>
document.querySelector('template').addEventListener('template-bound', function() {
this.sliderChange = function() {
var x=(this.sliderValue);
var n = x.toString();
document.getElementById("valueslide").innerHTML=x;
document.getElementById('mytextarea').innerHTML =x;
document.getElementById('firstNumber').value =n;
};
});
</script>
</html>
There are a few different options here.
AJAX: you would publish by AJAX any changes to your server when the change event is fired. You could store the value in a DB or some other data store. The subscriber page would then poll for changes to that data store and retrieve the new value (again by AJAX).
Pros: Easy to implement
Cons: you'd be constant opening and closing connections and you'd need to manage the order of responses carefully.
Web Sockets: you would open a web socket to the server and publish changes, the subscriber would also have a web socket connection open, so the server would pass the value on.
Pros: Very fast and no need to closely manage connections
Cons: Limited browser support and PHP is not suited to the task (NodeJS is your friend here)
Firebase (other services are available): probably the ideal solution would be to use a 3rd pub/sub such as Firebase that do the hard stuff of option 2, but with the fallback of option 1.
Pros: takes the difficult stuff off your plate, easy to implement, fast
Cons: 3rd party