I'm trying to replace my old calendar (DHX) by full calendar.
I use the demo code, and i managed to display my json events.
The issue i have is when i click to NEXT, or PEV.
I don,t see the others events.
I load all 2019 events in one shot for the next events should be displaying.
HTML :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>FTS Team</title>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="lib/angular-resource.js"></script>
<script src="calendarv2.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/bootstrap-css/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css">
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<!-- For Calendar -->
<script src="http://angular-ui.github.io/ui-calendar/bower_components/moment/moment.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/dist/gcal.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/src/calendar.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/dist/fullcalendar.css">
<!-- For Modal Windows -->
<script src="lib/bootstrap/js/ui-bootstrap-tpls-0.11.0.js"></script>
</head>
<body ng-controller="myCtrl">
<div ui-calendar="uiConfig.calendar" class="span12 calendar" ng-model="eventSources"></div>
</body>
</html>
The JS is :
var app = angular.module('myApp', ['ui.calendar', 'ui.bootstrap']);
app.controller('myCtrl', function ($scope, $http, $compile, uiCalendarConfig)
{
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* event source that contains custom events on the scope */
$scope.events = [{title: 'All Day Event',start: new Date(y, m, 1)}];
$http.get('rest/event/').success(function(data) {
$scope.myEvents = data;
data.forEach(function(entry) {
var d1 = new Date(entry["dateB"]);
var d2 = new Date(entry["dateE"]);
var myEvent = {title: entry["title"],start: d1, end: d2, allDay: true};
if ( d1.getFullYear() >= 2019 ) {
$scope.events.push(myEvent);
}
});
});
/* alert on eventClick */
$scope.alertOnEventClick = function( date, jsEvent, view){
$scope.alertMessage = (date.title + ' was clicked ');
alert(date.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
$scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* Change View */
$scope.changeView = function(view,calendar) {
alert("change View");
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalender = function(calendar) {
alert("change View render");
if(uiCalendarConfig.calendars[calendar]){
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
};
/* Render Tooltip */
$scope.eventRender = function( event, element, view ) {
element.attr({'tooltip': event.title,'tooltip-append-to-body': true});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 600,
editable: false,
weekends: true,
defaultView: 'month',
lazyFetching: 'false',
displayEventTime: false,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
/* event sources array*/
$scope.eventSources = [$scope.events];
});
Would have any idea what i'm missing ?
thanks,
Nicolas
I had the same problem and I destroyed the callender and then recreate it for next and prev event ,and its work for me!
Related
I have a task that, need to sync my websites's full calendar with google calendar private data. I could able to extract data from google, but while trying to display that to the Jquery full calendar, it shows an error that TypeError: $(...).fullCalendar is not a function, but when page loads full calender is loading properly. I'm getting this error only when refreshing the calendar after fetching data from google.
Here is the code i'm using:
<!DOCTYPE html>
<html>
<head>
<title>Google Calendar API Quickstart</title>
<meta charset='utf-8' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css' />
</head>
<body>
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>
<pre id="content"></pre>
<div id='calendar'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js'></script>
<script type="text/javascript">
var events = [];
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: events,
color: 'black', // an option!
textColor: 'yellow' // an option!
}
// any other event sources...
]
});
var CLIENT_ID = 'My Id';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function () {
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listUpcomingEvents();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
function refreshCalander(eventData) {
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: eventData,
color: 'black', // an option!
textColor: 'yellow' // an option!
}
// any other event sources..
]
});
}
function listUpcomingEvents() {
gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
}).then(function (response) {
var googleEvents = response.result.items;
if (googleEvents.length > 0) {
for (i = 0; i < googleEvents.length; i++) {
var event = googleEvents[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
events.push({ "title": event.summary, "start": when });
}
refreshCalander(events);
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
$(document).ready(function () {
$.datepicker.setDefaults($.datepicker.regional["en"]);
// $('.datepicker').datepicker({ dateFormat: 'dd-mm-yyyy' });
$(':input.datepicker').datepicker({ dateFormat: 'yyyy-mm-dd' });
$("form[id*=frmUpdateCalendar").validationEngine();
//Initialisations
initialize_Calendar();
});
/* Initialize external events
-----------------------------------------------------------------*/
function initialize_external_event(selector) {
//initialize booking types
$(selector).each(function () {
//Make draggable
$(this).draggable({
revert: true,
revertDuration: 0,
zIndex: 999,
cursorAt: {
left: 10,
top: 1
}
});
//Create event object
var event_object = {
title: $.trim($(this).text())
};
//Store event in dom to be accessed later
$(this).data('eventObject', event_object);
});
}
/* initialize the calendar
-----------------------------------------------------------------*/
function initialize_Calendar() {
$("div[id*=HolidaysCalendar]").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month"
//right: "month,agendaWeek,agendaDay"
},
firstDay: 1,
editable: false,
droppable: false,
selectable: true,
selectHelper: true,
events: "JsonResponse.ashx",
eventRender: function (calEvent, element, monthView) {
element.attr('title', calEvent.description);
},
dayClick: function (date, allDay, jsEvent, view) {
},
eventClick: dialogUpdateEvent,
eventDrop: function (calEvent, dayDelta, minuteDelta, allDay,
revertFunc, jsEvent, ui, view) {
},
eventResize: function (calEvent, dayDelta, minuteDelta, revertFunc) {
}
});
//initialize external events
initialize_external_event('.external-event');
}
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/moment.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/fullcalendar/fullcalendar.min.js"></script>
i'am using asp.net with aspx page, I keep getting this problem :
TypeError: $(...).fullCalendar is not a function
$("div[id*=HolidaysCalendar]").fullCalendar();
So it basically doesn't know much about fullCalendar.
I use FullCalendar 2.6.1 as external plugin(just add directory to myapp/client/ with fullcalendar staff) with Meteor 1.2.1. I also use jquery-ui-1.11.4. And in my calendar I have a strange bug: I can't drop event to any day after first 2 (some times 3 or 4) weeks in month view. And it doesn't matter which mont I choose.
I have a reproduction. If you want to see just login with user test#user.com and password 111 to http://85.143.219.249:4000/login and open calendar.
I also try to use package rzymek:fullcalendar but same bug is present.
As I remember I haven't such bug with old version(2.2.0) of fullcalendar.
Here is how I initialize calendar.
Template:
<template name="calendar">
<div class="content">
{{#pageTitle title="Calendar" }}{{/pageTitle}}
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="hpanel">
<div class="panel-body">
<div id="external-events">
<strong>Click, Drop or Resize event on calendar!</strong>
<p>Message from functions:
<br/>
<div id="external-events">
<p>Drag a event and drop into callendar.</p>
{{#each workouts}}
<div class='external-event h-bg-green text-white' id={{this._id}}>{{workoutName}}</div>
{{/each}}
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
{{#panel title="Calendar"}}
<div id="calendar"></div>
{{/panel}}
</div>
</div>
</div>
And JS:
Template.calendar.onRendered(function() {
// Initialize i-check plugin
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green'
});
// Initialize the external events
$('#external-events div.external-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1111999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// Re-rendering calendar events when collection changed
//var calendar = this.$('.fc');
this.autorun(function() {
$('#calendar').fullCalendar('refetchEvents');
});
// Initialize the calendar
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'title',
right: 'today prev,next'
},
lang: 'ru',
timezone: 'local',
fixedWeekCount: false,
editable: true,
droppable: true,
displayEventTime: false,
allDayDefault: true,
color: '#62cb31',
drop: function(date) {
var newCalendarEvent = {};
newCalendarEvent.start = date.format();
newCalendarEvent.eventSourceId = this.id;
newCalendarEvent.eventSourceType = 'workout';
newCalendarEvent.title = $(this).text();
newCalendarEvent.color = '#62cb31';
Meteor.call('calendarEventAdd', newCalendarEvent);
},
eventReceive: function(event) {
var calendarEventId = event._id;
var calendarEventDate = event.start.format();
var calendarEventName = event.title;
var calendarEventColor = '#62cb31';
//Meteor.call('calendarEventAdd', calendarEventDate, calendarEventId, calendarEventName, calendarEventColor);
//console.log(calendarEventDate);
},
events: function(start, end, timezone, callback) {
var calendarEvents = [];
_.each(Calendar.find({}, {fields: {start: 1, title: 1, color: 1}}).fetch(), function(value, key, list) {
calendarEvents.push(value);
});
callback(calendarEvents);
},
eventDragStart: function(event, jsEvent, ui, view) {
$(this).qtip().hide();
},
eventDrop: function(event, delta) {
var eventId = event._id;
var newEventDate = event.start.format();
console.log(event);
console.log(delta);
Meteor.call('calendarEventUpdate', eventId, newEventDate);
},
eventRender: function(event, element) {
$(element).css({backgroundColor: '#62cb31', borderColor: '#62cb31'});
var content = '<button class="btn btn-xs btn-default delCalendarEvent" id="' + event._id + '"><i class="fa fa-trash"></i></button>';
element.qtip({
show: {
event: 'click',
solo: true
},
hide: {
event: 'click unfocus'
},
content: content,
style: {
classes: 'qtip-bootstrap'
},
position: {
my: 'bottom center',
at: 'top center',
container: element
}
});
}
});
});
Template.calendar.events({
'click .delCalendarEvent': function(event, template) {
var eventId = event.currentTarget.id;
var calendar = template.$('.fc');
//Meteor.call('calendarEventDel', eventId);
Meteor.call('calendarEventDel', eventId, function(error, result) {
if (error) {
console.log(error);
} else {
calendar.fullCalendar('removeEvents', eventId);
}
});
}
});
This piece of code works for me.
Try to add this to css file:
body .fc {
overflow:auto;
}
I also had this issue and found that it was caused by a parent container being 100% height. I noticed that the week rows that did not allow a drag were not in my initial view on page load.My body tag was being styled as 100% height which after looking at the browser dev tools looked more like a view height of 100. After removing that it worked fine. If you are having the same issue i would open the dev tools, scroll down, and then run through the different tags of any parents to see which ones seem to cut off at the same point you cannot drag your events.
To reproduce, download CefSharp from here:
https://github.com/cefsharp/CefSharp
And run the CefSharp.WinForms.Example
Now run my fiddle on your browser and the CefSharp browser:
http://jsfiddle.net/bjmL9/
I added an alert displaying full address data on click (street_number, route, neighborhood, locality, administrative_area_level_2, administrative_area_level_1, country, postal_code).
Compare the data displayed on your browser to the one on the CefSharp browser.
The problem:
In my browser, the locality shows as "Culiacán Rosales", but on the Cef browser it gets truncated to "Culiacán". The country behaves weird too with Cef displaying "Mexico" instead of "México" (unaccented).
I am on the edge of quitting cef cuz i can't get a google match on this problem and no idea how to fix it...
This is the code of the fiddle since it won't last for ever:
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link href="MapStyle.css" rel="stylesheet" type="text/css" media="all"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var map;
var geocoder;
function initialize() {
var placeMarkers = [];
geocoder = new google.maps.Geocoder();
var aquamiller = new google.maps.LatLng(
24.832956,
-107.389775);
var mapOptions = {
zoom: 16,
center: aquamiller,
};
map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions);
createSearchBar(map, placeMarkers);
google.maps.event.addListener(
map,
'click',
function(e) {
getAddress(e.latLng, function(address) {
alert(
address.street_number + ', ' +
address.route + ', ' +
address.neighborhood + ', ' +
address.locality + ', ' +
address.administrative_area_level_2 + ', ' +
address.administrative_area_level_1 + ', ' +
address.country + ', ' +
address.postal_code);
});
});
}
function getAddress(latLng, callBack)
{
geocoder.geocode({'latLng': latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var address = {};
var components = results[0].address_components;
for (var i = 0 ; i< components.length ; i++) {
address[components[i].types[0]] = components[i].long_name;
}
callBack(address);
}
else {
alert('No results found');
}
}
else {
alert('Geocoder failed due to: ' + status);
}
});
}
function createSearchBar(map, markers)
{
var input = /** #type {HTMLInputElement} */(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(/** #type {HTMLInputElement} */(input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
console.log(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(16);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
Hey wait once more I see the same behavior (missing " Rosales" and accent in "México") with both my standard Chrome 35 and IE 10.
So, maybe it's related to a missing CEF language pack: https://github.com/cefsharp/cef-binary/tree/cef_binary_1.1364.1123/Release/locales .. the NuGet you use probably only has en-US.pak
... Tested a bit more with your fiddle example. Dropping es.pak in my install didn't help. BUT I see similar if I search for "Sønderborg, Denmark" in the search box in the map. (At some locations there it says "S**o**nderborg", no "ø" ) So are you sure its browser related and not just the google API?
update Asking with language=es as in:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=es&libraries=places"></script>
Alters the response from googles API. Currently verified using my iPad and your fiddle!
I have a j-query date-picker that does not work after the first post back. It only works before the post back but the date-picker does not work after post back. the text-box that shows the date-picker is wrapped with ajax update panel. here is my j-query:
<script type="text/javascript">
$().ready(function () {
$('.date-picker').mousedown(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
</script>
<style type="text/css">
.ui-datepicker-calendar {
display: none;
}
</style>
Your issue is that on a partial post back, which is what happens when an UpdatePanel causes a post back, the DOM is not reloaded and thus your $().ready(function () { will not fire and wire up the date picker. This is one of those ASP.NET AJAX gotchas.
One way to deal with this is to have a JavaScript function invoked when the PageRequestManager does the partial post back via the UpdatePanel, like this:
<script type="text/javascript">
$().ready(function () {
$('.date-picker').mousedown(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// Re-bind your jQuery objects here
});
</script>
Note: This is one of those places where jQuery and ASP.NET AJAX do not play nice without a little tweaking.
You should use a rebind for every page load like this :
function pageLoad() {
$('#mydatepick').unbind();
$('#mydatepick').datepicker();
};