I use a function to get my events:
events: function (start, end, timezone, callback) {
$.ajax({
url: '/Controller/GetDiaryEvents/',
data: {
when I add a new event, the calendar does not show the newly added event. Do I need to reset my eventsource somehow ?
success: function (response) {
debugger;
if (response == true) {
$('#calendar').fullCalendar('refetchEvents');
alert('New event saved!');
}
This link FullCalendar refetchEvents not reloading calendar says to do Calendar..init but I don't see that method.
There is no need to refetch all events.
When new event is created add it to calendar using addEventSource function.
$("#calendar").fullCalendar( 'addEventSource', source );
Source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar.
Simply add a function getEvents() and call it where you want to refetch
function getEvents()
{
$('#calendar').fullCalendar( 'refetchEvents' );
}
Related
I currently using google calendar on my website with the iframe you can insert. I tested Fullcalendar and I like what you can do with it.
But I would like to do same as the embed calendar, I would like to be able to create private event (not calendar, events). The sharing settings of the calendar is on public, but when using chrome, you can log with your google account and with the embed calendar you can see private event (if you have access to the calendar).
Is that possible with Fullcalendar ?
I figure out how to connect via OAUTH and get the private event when you are authentified.
By clicking on a button, you can connect to a google account (If already connected in browser, no button will appear and you will be log automaticly).
I follow this google example
<script type="text/javascript">
var clientId = '<your-client-id>';
var apiKey = '<your-api-key>';
var scopes = 'https://www.googleapis.com/auth/calendar';
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
GeneratePublicCalendar();
}
}
function handleAuthClick(event) {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
// Step 4: Load the Google+ API
gapi.client.load('calendar', 'v3').then(function() {
// Step 5: Assemble the API request
var request = gapi.client.calendar.events.list({
'calendarId': '<your-calendar-id(The #gmail.com>'
});
// Step 6: Execute the API request
request.then(function(resp) {
var eventsList = [];
var successArgs;
var successRes;
if (resp.result.error) {
reportError('Google Calendar API: ' + data.error.message, data.error.errors);
}
else if (resp.result.items) {
$.each(resp.result.items, function(i, entry) {
var url = entry.htmlLink;
// make the URLs for each event show times in the correct timezone
//if (timezoneArg) {
// url = injectQsComponent(url, 'ctz=' + timezoneArg);
//}
eventsList.push({
id: entry.id,
title: entry.summary,
start: entry.start.dateTime || entry.start.date, // try timed. will fall back to all-day
end: entry.end.dateTime || entry.end.date, // same
url: url,
location: entry.location,
description: entry.description
});
});
// call the success handler(s) and allow it to return a new events array
successArgs = [ eventsList ].concat(Array.prototype.slice.call(arguments, 1)); // forward other jq args
successRes = $.fullCalendar.applyAll(true, this, successArgs);
if ($.isArray(successRes)) {
return successRes;
}
}
if(eventsList.length > 0)
{
// Here create your calendar but the events options is :
//fullcalendar.events: eventsList (Still looking for a methode that remove current event and fill with those news event without recreating the calendar.
}
return eventsList;
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
});
}
function GeneratePublicCalendar(){
// You need a normal fullcalendar with googleApi when user isn't logged
$('#calendar').fullCalendar({
googleCalendarApiKey: '<your-key>',
...
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
And in your google api console, make sure in API & Auth -> ID
OAuth Javascript origin is set properly (Like http://localhost
https://localhost if you are working on a local website)
Leave Redirection and API referent empty.
Fullcalendar is a front-end solution only. Logging into a google account and any other authentication isn't part of it.
That said, it can be connected to a google calendar, but only if it's a public google calendar. If you want to interface it to a private google calendar, you would have to build in that functionality.
If you can get the gcal events with JS and handle authentication, getting them into FullCalendar is easy. But that first part takes a few steps. Take a look at the google calendar api docs for instruction.
I'm making a simple app where I start a countdown timer, and when the timer expires it shows a template. On that template, I answer a series of questions, then then submit the answers to the database.
At the moment, my countdown timer just written in JavaScript like this:
Template.start.events({
'click .startTimer': function() {
$("#timer").text();
(function() {
var wait = 2;
var countSpan = $('#timer span');
function countdown() {
wait -= 1;
if (wait > 0) {
countSpan.text(wait);
setTimeout(countdown, 1000);
$('.startTimer').prop("disabled", true);
Session.set('done', false);
} else {
Session.set('done', true);
$('.startTimer').prop("disabled", false);
countSpan.text("Complete checkup then keep working!");
}
}
setTimeout(countdown, 1000);
}());
}
});
The problem is that when I navigate away from the page that's printing out the countdown, it doesn't persist.
How do I make a countdown timer within my app that will keep going while I navigate to other pages within the app?
What about this pseudo idea:
Once you navigate away form the page (tab blur of some sorts), save
variable in the Session with current timestamp
Session.set("leavingAt", new Date())
Once you return to the page (equivalent tab focus), save new variable with current timestamp
Session.set("returningAt", new Date())
Add/substract difference between both (depending on how you implement) and update your countdown timer
You could start the timer on the server using a Meteor method.
// call method from template
Meteor.call('startTimer', function() {
// handle timer finished logic
});
//server
Meteor.methods({
startTimer: function() {
Meteor.setTimeout(function() {
//do something
return;
}, ms)
}
});
I think your callback will still be triggered even if you're on a different template, but I'm not 100% sure.
I ended up using meteorhacks:async to accomplish this. Here's the code:
function delayedMessge(callback) {
Meteor.setTimeout(function() {
callback(null, true)
}, 1000)
}
var wrappedDelayedMessage = Async.wrap(delayedMessge);
Meteor.methods({
'abc': function() {
var response = wrappedDelayedMessage();
return response;
}
});
Template.start.events({
'click .start': function() {
Meteor.call('abc', function(error, response){
var timeup = response
//I'm setting this session to true, then in a helper
//that isn't shown here, I'm getting the Session and
//which displays the template
Session.set('done', timeup)
});
}
})
azium's answer led me in the right direction but wasn't quite right. I did end up running a setTimeout within a method but there was a problem. The callback associated with the Meteor.call is executed right away, but the setTimeout within the mehod hasn't finished yet. With the meteorhacks:async package, the Meteor.call callback function waits until the setTimeout fires.
I need a periodic refresh of .Net's partial view. It is working with Ajax.ActionLink, is there a similar feature for periodic refresh? Can I do it without using jQuery?
Zen, you could do it by a code like this:
function loadPartialView() {
$.ajax({
url: "#Url.Action("ActionName", "ControllerName")",
type: 'GET', // <-- make a async request by GET
dataType: 'html', // <-- to expect an html response
success: function(result) {
$('#YourDiv').html(result);
}
});
}
$(function() {
loadPartialView(); // first time
// re-call the function each 5 seconds
window.setInterval("loadPartialView()", 5000);
});
Remember your Action should return a PartialView.
I hope it helps you!
Maybe this can help you. Which version of MVC are you using? You can set a specified time interval for a helper method. This is the only way I've seen without using js.
Try this.
$(document).ready(function () {
var url = "#(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
setInterval(function () {
var url = "#(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
}, 30000); //Refreshes every 30 seconds
$.ajaxSetup({ cache: false }); //Turn off caching
});
It makes an initial call to load the div, and then subsequent calls are on a 30 second interval.
In the controller section you can update the object and pass the object to the partial view.
public class ControllerName: Controller
{
public ActionResult ActionName()
{
.
. // code for update object
.
return PartialView("PartialViewName", updatedObject);
}
}
I'm building an easy plugIn for validations, after setting up some options to be editable,
and after cycling all the fields i wrote:
$(this).submit(function () {
where "this" is the main element (the form).
Now I was wondering to use this plug-in in asp.net as well, so without using an html form, where there are just some inputs into a div and on click on a specific button it start...
So I know that here I have to change the submit... and trying to bind it on click of the button... I don't know how to solve this...
Can someone help?
You need help to bind a click event? For that you write
$('#buttonID').click(function(e)
{
// do some logic
e.preventDefault(); // make sure that ie. a href is not followed
});
you should take a look at what I was doing here. My plugin hijacks a form post to submit data cross domain to my server instead of the hosting server. The overall method could be used for your validation.
here's a quick and dirty example of my code.
$.fn.myplugin= function (options) {
var settings = {
setting1: undefined,
setting2: undefined,
setting3: undefined,
beforeSubmit: function () { return true; },
afterSubmit: function () { },
approve: function () { },
decline: function () { },
error: function () { },
exception: function (xhr, status, error) { }
};
// If options exist, lets merge them
// with our default settings
if (options) {
$.extend(settings, options);
}
//ensure this is attached only to a FORM element
if (!$(this).is("form"))
throw ('Specified object is not a valid form. This plugin can only be attached to a form element.');
$(this).live("submit", function (event) {
var result = true;
//NEVER EVER EVER allow the form to submit to the server
event.preventDefault();
if (settings.beforeSubmit)
result = settings.beforeSubmit();
if (result != null && !result)
return false;
//do stuff
}); //end live submit
};
Then, usage looks like this
$('#form-id').myplugin({
setting1: 'value',
setting2: 'value',
setting3: 'value'
});
I want execute below callback() method after completion of document.getElementById('btnDownload').click(); method . Now callback()executing immediatly. I want wait "Click()" process done then Execute callback(); method.
function LoadPopup() {
// find the popup behavior
this._popup = $find('mdlPopup');
// show the popup
this._popup.show();
// synchronously run the server side validation ...
document.getElementById('btnDownload').click();
callback();
}
function callback() {
this._popup = $find('mdlPopup');
// hide the popup
this._popup.hide();
alert("hi");
}
Unless I've wildly misunderstood the question, this code will make a request to the page that the link leads to, and when the server has returned the response, executes the function:
$(document).ready(function() {
$("#btnDownload").click(function() {
$.ajax({
url: $(this).attr("href"),
complete: function(xhr, status) {
callback();
}
});
return false;
});
});
I may have wildly misunderstood the question...
Your question is not clear. But I will give you a example.
For example, you wan to load a page by clicking on a image then after the page load is complete you want to do something you can something like this
$('#buttonid').click(function() {
//this is the callback function of click event
//if you want some other callback functions then you need something like this
$("#somediv").load("page.php", function() {
//callback function code of .load event
alert('page loaded');
});
});
What you are asking is to have a callback function inside the default callback function of click event and a bit impossible from my point of view.