I have 2 views in fullcalendar (Day and Week view). My question is that can we use 2 different resources for day and week view, that means both views uses different json for drawing events in calendar.
Here my suggestion:
$('#your-selector').fullCalendar({
viewDisplay: function(view) {
if (view.title=='agendaWeek') //or whatever view you are using
{
$('#your-selector').fullCalendar( 'removeEventSource', DaySource );
$('#your-selector').fullCalendar( 'addEventSource', WeekSource );
}else{
$('#your-selector').fullCalendar( 'removeEventSource', WeekSource );
$('#your-selector').fullCalendar( 'addEventSource', DaySource );
}
}
});
I don't really know if the event viewDisplay is the most appropriate event, probably you need to store the current view in order to avoid overhead and useless requests (viewDisplay is going to be called when you change the date, for example. Not necessarily when you change the view). There is a method called changeView (http://arshaw.com/fullcalendar/docs/views/changeView/) if you wish to have more control over the change views.
Regards,
Related
I am sending a custom event ("ebook") with a parameter ("titolo") to GA4. After that, I have set the parameter as a Custom Dimension in GA UI.
I am sending the event from my website with this code:
function ebooksGA4new(title) {
gtag('event', 'ebooks', {
'titolo': title
});
}
Then I have set an Exploration on the custom dimension, but after 3 days it still reports "not_set. If I fire the event, I can see it in the real-time report.
Here are 2 ways to find out why
Modify the code a bit, make sure it won't trigger the event if it doesn't have title parameter.
But please make sure this is what you want. You need to decide it is ok or not to receive the event without title parameter.
function ebooksGA4new(title) {
if(!title || title=="")
return false;
gtag('event', 'ebooks', {
'titolo': title
});
}
Open the chrome devtool or something similar with it. Here is the screenshot about how to check it. This should appear on your GA4 real time report as well.
I am using fullcalendar 1.6.0, with qtip2, building an array in php and using this as the events list
$('#calendar').fullCalendar({
// put your options and callbacks here
events: [
<?php echo $eventlist; ?>
],
It is working fine, but I would now like to use the calendar in a 'mobile friendly' layout.
What I want to do is, at resolutions below a certain breakpoint, remove some or all of the event information from displaying within the calendar itself, (so a colored block appears on the calendar, but little or nothing else) but still appear in the qtip.
Can I use eventrender to do this ?
Yes. I think you can do this.
Below is the sample code. You have to use two events eventRender and eventAfterAllRender. or you can also hide the elements inside eventAfterAllRender.
eventRender: function (event, element, view) {
if( window.screen.width < 300 ) {
$('.fc-event-title').hide();
$('.fc-event-time').hide();
}
},
eventAfterAllRender: function( view ) {
$('.fc-event-inner').each(function(){
$(this).qtip(
{
content: $(this).children('.fc-event-time').html() + '' + $(this).children('.fc-event-title').html()
});
}
}
NOTE: This code is not tested. Change it according to your needs. Something like above will work for you.
I am working with Symfony2. I have two fields in a form builder, when I select a choice in the first field, information in the second field should be reloaded dynamically according the first choice.
How can I do it ?
What do we need?
Let's say for the sake of simplicity you need when the user type in 'knock knock' the next field is filled with 'who's there'.
Assuming that the first field (which the user will fill) has an id of #input_filled_by_user and the other field's id is #input_filled_with_php.
How do we solve this?
As long as the user will be typing after the script is executed, we need something to tell us the he wrote the specific word in or case 'knock knock' (which is jQuery), and send it to a controller (a fancy name for rest API).
And then in the controller we process and send back result, and with jQuery (again) we output the result to the user.
The code
First we need a router:
my_door_keeper_router:
pattern: /request/{string}
defaults: { _controller: AcmeDemoBundle:door:keeper, _format: ~ }
requirements:
_method: GET
id: "\d+"
And here is the action controller:
public function keeperAction($string)
{
if ($string == 'knock knock') {
echo "hello"; // please dont do it with echo use symfony way , i just dont have enough time
}
return;
}
Now with jQuery:
$('#input_filled_by_user').change(
function(){
$.get('/request', { string: $(this).val() } ,function(data) {
$('#input_filled_with_php').val(data);
alert('Load was performed.');
});
}
)
And that's it. Hope this makes sense (please dig deeper, I tried to explain it the dummy way, and some of the things i mentioned are half correct, but for whatever you're trying to do now you will be fine doing so).
I have a many-to-many relationship in mongodb between Players and Tournaments.
I want to be able to add many Players to a Tournament at once. This is trivial to do without ajax, but we have a DB of thousands of Players, and so the form select becomes huge.
We want to use ajax for this. Is it possible to create a single widget (with js) to handle this properly? If so, any hints on what jquery plugin (or other) to use?
If not, whats the standard strategy to do this? I suppose I could heavily change the view for this form and use an ajax autocomplete to add one player at a time, and then some more code to delete each player one at a time. However, I'd really like to have a single widget I can re-use because its so much cleaner and seems much more efficient.
I have been playing with Select2 all day (similar to jQuery Chosen) and I have it working for adding many Players via ajax, but it does not allow me to set the already attached players when I initially load the page, so I won't be able to see who's already in the tournament and would have to retype everyone in.
Thanks for ANY input on this matter! I can't find anything via Google.
I was able to accomplish this by $.ajax after the constructor within the onload function where //website/jsonItem is a json-encoded list of all items, and //website/jsonItemUser is a json-encoded list of all items attached to user. I used // to keep the https/http consistent between calls.
$(document).ready(function(){
$('.selectitem').select2({
minimumInputLength:0
,multiple: true
,ajax: {
url: "//website/jsonItem"
,dataType: 'jsonp'
,data: function (term, page) {
return {
q: term, // search term
limit: 20,
page: page
};
}
,results: function (data, page) {
var more = (page * 20) < data.total;
return {
results: data.objects, more: more
};
}
}
,initSelection: function(element, callback){
var items=new Array();
$.ajax({
url: "//website/jsonItemUser"
});
callback(items);
}
});
$.ajax({
url: "//website/jsonItemUser"
,dataType: 'jsonp'
,success: function(items, status, ob) {
$('.selectitem').select2('data',items);
}
});
});
I am sure there is a simple solution, but after reading existing posts and the documentation, I haven't been able to locate it just yet. This is my first post here, so any help is much appreciated.
I am integrating the FullCalendar with ExpressionEngine and the Calendar module for EE, and I have events rendering in FancyBox.
My only remaining issue is that the background of each event is the same color. What I am wanting to accomplish is on any given day, make multiple events have a different background color to identify the event as unique. In the documentation, it explains how to change the background color, but it's an "all-or-nothing" solution.
I also attempted to tweak the styles, but this made every day cell have the background color, rather than the actual individual events.
The code that builds the calendar and populates events from EE is listed as follows:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: ''
},
editable: false,
events: [ {}
{exp:calendar:events event_id="{segment_3}" sort="asc" dynamic="off"}
{occurrences}
,{title: '{event_title}',
url: '{url_title_path="path_to/event/"}',
start: new Date({occurrence_start_date format="%Y,%n-1,%j"}),
end: new Date({occurrence_end_date format="%Y,%n-1,%j"}),
allDay: true,}
{/occurrences}
{/exp:calendar:events}
],
eventClick: function(event) {
if (event.url) {
$("a").fancybox(event.url);
return false;
}
}
}); });
This would be simple to do if the events were manually being populated, but the data is coming from ExpressionEngine, rather than being hard-coded.
Any thoughts on how to make each event on a per-day basis render with a different background color than any of the other events listed for that same day?
Thanks for reading!!!
The current version of fullCalendar has a property on an event object '.backgroundColor' which can be set to change the background colour of that event. Of course you'd have to write some code to set up the background colours to all be unique within a day.
You may consider using the css3 nth child selectors here. This will allow CSS to automagically change the colors for you. See: http://css-tricks.com/how-nth-child-works/
You would of course need to target the appropriate elements, but without seeing the full DOM it will be very difficult for us to help with that here.
You can use eventAfterAllRenderwhich is triggered after all events have finished rendering in the fullCalendar from both source.
eventAfterAllRender: function( view ) {
var allevents = $('#calendar').fullCalendar('clientEvents');
}
Now, with the allevents object, you can do whatever toy wish.
Here is the one I took for me:
eventAfterAllRender: function(view) {
var allevents = $('#calendar').fullCalendar('clientEvents');
var countevents = 0;
if( allevents.length ) {
countevents = countevents + allevents.length;
}
if(!countevents) {
// alert('event count is'+countevents);
console.log('event count is',countevents);
}
}
One of my friend was able to get the id of duplicate events and now I can delete the duplicate event within a loop as:
$('#calendar').fullCalendar('removeEvents', allevents[i].id);
Now it is up to you. Very sorry because I am running a busy schedule nowadays. I'm glad if someone would generate a proper solution for Mr. Lane from this(even by editing this answer).
Thank you.