full calendar truncate title - fullcalendar

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.

Related

Fullcalendar refresh on other displays

I want to use the full-calendar on some displays in several rooms , if there is change anything I want to show it live "without page reload" how is it possible to do that easily ?
I don't want use any Browser-Plugins or something for time-setting - should be live !
You can refetch the events after certain intervals, something like below:
$(function () { setInterval(function () { $('#MyCalendar').fullCalendar('refetchEvents')}, 1000);//set the milliseconds which will trigger continuously });

How to reset a custom plugin dialog in CKEditor 4

My problem is I have a plugin which works fine when there is only 1 CKEditor in the page. You can open and close the custom plugin dialog as many times as you want, and make all your changes.
However, as soon as you open the plugin on any of the other CKEditors on the page, the values from the previous CKEditor instance are still present, and a lot of quirks happen.
I tried using the dialog.destroy() function, which "fixes" the issue - meaning you can now use it fine on all the different CKEditor instances. But it breaks the current instance, meaning if you try to open any you already used again, it doesn't work (since the dialog has been destroyed). I tried using reset() and replace() to no avail.
Maybe it has something to do with the fields themselves... here is a sample from the dialogs/my_plugin.js file:
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: 'icon_with_options',
html: '<div id="selected-icon"></div>',
},
{
type: 'html',
id: 'osu_icon_color',
html: '<div class="osu-colors"><label>Click on a color <input id="osu-icon-color" type="text" value="osu" readonly/></label>' +
'<p class="osu color-active"></p>' +
'<p class="sand"></p>' +
'<p class="stratosphere"></p>' +
'<p class="moondust"></p>' +
'<p class="dark"></p>' +
'<p class="pine-stand"></p>' +
'<p class="luminance"></p>' +
'<p class="reindeer-moss"></p>' +
'</div>',
onLoad: function () {
(function ($) {
var colors = $('.osu-colors p');
colors.click(function (e) {
colors.removeClass('color-active');
var className = e.currentTarget.className;
document.getElementById('osu-icon-color').value = className;
icon_preview();
$(this).addClass('color-active');
});
})(jQuery);
},
},
I wonder if the problem is that most HTML is decoration.
I did samples with the plugin using regular type:text and type:select and these worked fine. But somehow the type:'html' does not clear the same way and is causing issues. Unfortunately all examples online are of simple text elements or other prebuilt elements.
Any help is appreciated. This is a plugin inside a Drupal 7 module, but it should apply regardless.
I am sure there are better ways of doing this, but what I ended up doing was:
Since CKEditor gives unique names to every instance of the editor, I used: CKEDITOR.currentInstance.name as an ID that wraps around all the html in the plugin.
Modified my javascript to target everything based on the CKEDITOR.currentInstance.name and any particular ID or class I needed to make it happen.
Now since each instance is differentiated by that ID, all the CKEditor instances in a page work fine.

how to properly bind jquery ui behaviors in meteor?

I am trying to create a group of draggable DOM objects using jQuery UI's .draggable() that are populated through Meteor subscriptions. The code I came up with looks like
Meteor.subscribe('those_absent', function() {
$( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
Meteor.subscribe('those_present', function() {
$( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
These correspond with some Meteor.publish() calls, so that any time the collection changes, the .draggable() behaviour will be attached. At least, that was my intention.
However, it only works once - once one of these <li>'s has been dragged and dropped, then they are no longer draggable at all.
When the objects are dropped, I'm firing a custom event that is attached to the Template for the item like so
$( "#c_absent .inner-drop" ).droppable({
drop: function( event, ui ) {
ui.draggable.trigger('inout.leave');
}
});
Template.loftie_detail.events = {
'inout.leave': function (e) {
Lofties.update({_id:this._id}, {$set: {present: 'N' }});
}
};
So, my thinking is that this change to the collection on drop should propagate through the pub/sub process and re-run the .draggable() line above. But it doesn't seem to.
The complete code for this can be seen here https://github.com/sbeam/in-out/blob/master/client/inout.js and the app is live at http://inout.meteor.com/ (there are some other probably unrelated issues with items randomly losing values or disappearing from the UI altogether)
So if my understanding of how pub/sub works in Meteor is off, it would be good to know. Or is there a more efficient way to achieve this UI behavior binding that works without it?
The way I have implemented this in my apps is with the method shown by #lashleigh.
I have a template event that listens using code like this :
Template.myDraggableItem.events({
'mouseover .workItem' : function() {
$(this._id).draggable();
}
});
Then I listen for the dragstop like this.
$('body').on('dragstop', '.myDraggableItem', function (e) {
// Update the collection with the new position
};
You can see the app that's using this code at aduno.meteor.com

Make Event Background Color Unique on a Per-event Basis

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.

How to add a row hyperlink for an extJS Grid?

Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!

Resources