We Keep Coding

FullCalendar plugin - display hour in all of cells?

I am using FullCalendar jQuery plugin and I need to modify it. My goal is to automatically display hour in every single cell, in every single day as event. I am creating an online registration system for my application and I need this functionality. After user clicks any hour and confirms it, I want to disable clicks for that chosen hour.
You can see on the picture on Monday example what I want to achive(but for all days):

No need to alter the plugin itself. Just make good use of all of the options available.
If you are just trying to change the content of any event that is displayed on the calendar, pass a function to the eventRender callback that returns a new DOM element. Use the momentjs library to display a formatted string for the start property of the event. For example:
var calendarOptions = {
// ...other options
eventRender: function(event, element) {
$(element).html(moment(event.start).format('h:mm'));
return element;
}
}
When you are done with calendarOptions, you'll obviously need to pass it to fullCalendar:
$(calElement).fullCalendar(calendarOptions);
If you want to display an event in every single cell, then first make an array of events for every cell increment... something like this:
var myEvents = [];
var timeCursor = moment(startTime);
while (+timeCursor < +moment(endTime)) {
var start = +timeCursor;
timeCursor = timeCursor.add(timeIncrement,'minutes');
var end = +timeCursor;
myEvents.push({
start: start,
end: end
});
}
(where you've previously set startTime, endTime, and timeIncrement!)
Then the events property of the calendar options to this array before passing to fullCalendar:
calendarOptions.events = myEvents;
Finally, to handle clicks on an event, pass a function to the eventClick callback option that does whatever you want. For example, if you are keeping track of which events have been clicked, you might want to push their start times to an array:
var clickedEvents = [];
calendarOptions.eventClick: function(calEvent, jsEvent) {
if (clickedEvents.indexOf(calEvent.start) < 0) {
clickedEvents.push(calEvent.start);
} else {
return false;
}
}
Then of course you might want to modify your eventRender callback again to have your event display reflect this status by changing the style of the element, adding a line like this before returning the altered element:
if (clickedEvents.indexOf(calEvent.start) < 0) {
$(element).addClass('already-clicked');
}
(Be sure to set the style for .already-clicked in your CSS with something like cursor: not-allowed and opacity: 0.5.)
fullCalendar rocks!

I am trying to use #georgedyer code, but I have some issues :/
Firstly i will show You how it looks like in my MVC 4 application:
Here is my View(html) for display fullCallendar. The point of this is only to display events for every single cell:
//path to installed moment.js
<script src="~/Scripts/moment.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: myEvents,
eventRender: function(event, element) {
$(element).html(moment(event.start).format('h:mm'));
return element;
},
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.start
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title);
},
(...)
});
//HERE IS YOUR CODE ABOUT CREATING ARRAY
var myEvents = [];
var timeCursor = moment('2015-09-08');
while (+timeCursor < +moment('2015-10-01'))
{
myEvents.push { start: timeCursor }
timeCursor = timeCursor.add('15', 'minutes');
}
</script>
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
I have question about one line of code because VisualStudio display warning here about semicolon: myEvents.push { start: timeCursor }.
I tried to change it to this: myEvents.push ({ start: timeCursor }), error disappear, but still doesn't work :/
I don't know what is wrong in this. After run this code It just display empty FullCalendar. I know this code is a little different than your but I think this should work the same way. Please for some help here.
Edit: I think that eventRender: function works just fine because if I creating an event by myself,It displays hour like it should. So problem is only in creating events. I think in my code my myEvents array is in wrong place and when I invoke it in events: myEvents array has zero items.

CustomColors colors in ExtJS 4 menu color picker (Ext.menu.ColorPicker)

and thank you for viewing this message!
I have a problem in one of my projects that uses a Ext.menu.ColorPicker
I don't know why (and it's probably something very simple, i hope) but the picker simply does not assume the custom colors that i need it to have!
Here is some sample code, that illustrates my problem:
Ext.onReady(function () {
var customColors = [
'fa7166', 'cf2424', 'a01a1a', '7e3838', 'ca7609', 'f88015', 'eda12a', 'd5b816',
'e281ca', 'bf53a4', '9d3283', '7a0f60', '542382', '7742a9', '8763ca', 'b586e2',
'7399f9', '4e79e6', '2951b9', '133897', '1a5173', '1a699c', '3694b7', '64b9d9',
'a8c67b', '83ad47', '2e8f0c', '176413', '0f4c30', '386651', '3ea987', '7bc3b5'
];
var picker = Ext.create('Ext.picker.Color');
picker.colors[0] = '556677';
picker.colors = customColors;
var btn = Ext.create('Ext.Button', {
menu: {
xtype: 'colormenu',
picker: picker,
value: 'FFFFFF',
handler: function (obj, rgb) {
Ext.Msg.alert('border-color: ' + rgb.toString());
} // handler
}, // menu
renderTo: Ext.getBody(),
text: 'Menu Button'
}).showMenu();
}); // onReady()
The line:
picker.colors[0] = '556677';
works perfectly, has you can see, i can change the element 0 of the array.
But this line:
picker.colors = customColors;
Should assign the whole array of new colors to the picker, i don't know why, but it doesn't seem to work.
I need the component to have all of those colors, 32 colors not the 40 default colors that are default on the picker!
How should i do this?
Thanks in advance...

You are you using the wrong combination of widgets, you are embedding a Ext.menu.ColorPicker inside another Ext.menu.Menu, instead of that you should use the Ext.menu.ColorPicker as is, and then you will be good to go, like this
var customColors = ['fa7166', 'cf2424', ...];
var pickerMenu = Ext.create('Ext.menu.ColorPicker');
pickerMenu.picker.colors = customColors;
var btn = Ext.create('Ext.Button', {
menu: pickerMenu, // menu
renderTo: Ext.getBody(),
text: 'Menu Button'
}).showMenu();
Here's a modified version of your code that works with the custom color list. Hope it helps to solve your problem.

mobiScroll - Reset value of wheels when clicking extra button

I'm trying to add a thrid functionality to the mobiscroll scroller. First of all some explanations: I have 4 custom created wheels from "0" to "9". The user can insert a 4-digit number here.
Additionally to the standard "cancel" ("Abbrechen") and the "add" ("OK") button i want to implement an reset ("Bestand") button, which sets all wheels within the scroller to the value "0". Adding this additionally button haven't been any problem, but adding the wanted functionality to it unfortunately is. The wanted function just should reset the value of all 4 wheels to the value "0". Following my code so far:
init the wheels....
var whl1 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl2 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl3 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl4 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var wheel = [{},{},{},{}];
wheel[0]['1000er'] = whl1;
wheel[1]['100er'] = whl2;
wheel[2]['10er'] = whl3;
wheel[3]['1er'] = whl4;
init the scroller.... (within a loop).......
$('#' + i +'').scroller({
display: 'modal',
mode: 'clickpick',
lang : 'de',
headerText: function(value) {
//Some Stuff in here
},
button3Text: "Bestand",
button3: function(){
// this function doesn't work................
$('#' + i +'').mobiscroll('setValue', ['0', '0', '0', '0']);
},
formatResult: function(data) {
// some other stuff in here
},
onSelect: function(valueText, inst) {
// some other stuff, too
},
wheels: wheel,
height: 40
});
I have tried many ways to realize the functionallity, but nothing worked.... does anyone have an idea, how I can fix this issue? Because I already lost a lot of time fixing this issue (2 full days...), I would be very grateful for every resonse or little hint...... Thanks in advance and have a nice week!

I think that inside the button3 function the value of i is always the same, it is not remembered what value it had inside the loop.
You can try to loop through the elements with jquery like this:
HTML:
<input id="t1" class="mobiscroll" />
<input id="t2" class="mobiscroll" />
<!-- .... -->
Javascript:
$('.mobiscroll').each(function() {
var that = $(this);
that.mobiscroll({
display: 'modal',
mode: 'clickpick',
lang : 'de',
headerText: function(value) {
//Some Stuff in here
},
button3Text: "Bestand",
button3: function(){
// this function doesn't work................
that.mobiscroll('setValue', ['0', '0', '0', '0']);
},
onSelect: function(valueText, inst) {
// some other stuff, too
},
wheels: wheel,
height: 40
});
});

How to add a customize buttons in dojox grid?

I've developed web applications with Dojo for more than one year, and I've used dojox grid a lot, but there is no way to add customize buttons on DataGrid or EnhancedGrid, as I know that ExtJS, or EasyUI, jQuery jqgrid are capable doing this.
So I want to ask if there is any way that can add buttons or other HTML DOM in the dojox.DataGrid?

at least, you can add dojo.form.Button's to it. simly add an element to the structure-property of your DataGrid like that (sorry, due to no-time i just copy pasted it from an actual project of mine...):
{
name: ' ',
field: 'idx',
type: dojox.grid.cells._Widget,
editable: false,
formatter: function (idx) {
return new dijit.form.Button({
_destroyOnRemove: true,
label: 'Bearbeiten',
onClick: function () {
dojo.byId('clickedItemIdx').value = idx + '';
if (reports.entries[idx].type == 'Rufbereitschaft') {
dojo.byId('addOrEditEntry_OCD_btn').click();
} else {
dojo.byId('addOrEditEntry_ASS_btn').click();
}
}
});
}
},
note that my data contains an idx-field which i commit to the onclick-function in order to know which element was clicked. This is the only way i got this to work.
As you may know, you can add multiple of those structure-elements referring to the same field.

Cluetip doesn't work after changing uidatepicker month

Picked ui datepicker as calendar and used cluetip to show events. Script is working until I change the month (push button <- or ->).
Main idea was to set title to the element that holds date and on hover show & split text in lines using cluetip.
EDIT: Here is example - hope it will help to understand my problem.
Here is the javascript code:
$(document).ready(function() {
var dates =[ // adding events
[new Date(2010,8,01),new Date(2010,8,03),"Event1 | text | next line"]
];
$('#calendar').datepicker({
beforeShowDay: highlightEvents,
});
function highlightEvents(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i][0] <= date && dates[i][2] >= date) {
return [true, 'odd', dates[i][2]]; } // odd == style
}
$('td.odd').cluetip({ // cluetip main function
splitTitle: '|',
cluetipClass: 'jtip',
arrows: true,
dropShadow: true,
});
});
Html code:
<div id="calendar"></div>
Thanks in advance!

Thanks to UberNeet post:
jQuery UI Datepicker with jQuery tipsy
Found the answer.
// Because the the event `onChangeMonthYear` get's called before updating
// the items, we'll add our code after the elements get rebuilt. We will hook
// to the `_updateDatepicker` method in the `Datepicker`.
// Saves the original function.
var _updateDatepicker_o = $.datepicker._updateDatepicker;
// Replaces the function.
$.datepicker._updateDatepicker = function(inst){
// First we call the original function from the appropiate context.
_updateDatepicker_o.apply(this, [inst]);
// No we can update the Tipsys.
addTipsys(inst.drawYear, inst.drawMonth+1, inst.id);
};
Hope this will help someone.