While using the Scheduler's Resource view the user found it hard to understand the hovering time.
Adding this below $('#calendar').fullCalendar( ... );
$(".fc-slats tr").each(function () {
$(this).addClass("timerow");
});
and CSS
.timerow:hover {background: lightblue;}
PROBLEM: When user pressed next or prev buttons the calendar rendered again the table and the .hover did not work.
adding the code also in the viewRender in Calendar's properties solved it.
viewRender: function (view, element) {
$(".fc-slats tr").each(function () {
$(this).addClass("timerow"); });
},
The final result is shown in the image below:
resource1
resource2
Related
Previous post which lead to this issue: Fullcalendar using resources as a function with select menu
Based on my previous post, I have an issue using fullcalendar 4. When I am using resources as a function, my all-day blocks do not line up with my scheduler time slots. You can see it in the picture.
Here's my resources function:
resources: function(fetchInfo, successCallback, failureCallback) {
// Filter resources by whether their id is in visibleResourceIds.
var filteredResources = [];
filteredResources = resourceData.filter(function(x) {
return visibleResourceIds.indexOf(x.id) !== -1;
});
successCallback(filteredResources);
},
Here's my toggleresource function:
// menu button/dropdown will trigger this function. Feed it resourceId.
function toggleResource(resourceId) {
visibleResourceIds = [];
//if select all... see if undefined from loading on initial load = true
if ((resourceId == '') || (resourceId === undefined)) {
$.map( resourceData, function( value, index ) {
visibleResourceIds.push(value.id);
});
}
var index = visibleResourceIds.indexOf(resourceId);
if (index !== -1) {
visibleResourceIds.splice(index, 1);
} else {
visibleResourceIds.push(resourceId);
}
calendar.refetchResources();
Other related code (when the menu changes, the resources of the selected menu item show only in fullcalendar):
var resourceData = [];
var visibleResourceIds = [];
$.getJSON('ajax_get_json.php?what=schedule_providers_at_location',
function(data) {
$.each(data, function(index) {
resourceData.push({
id: data[index].value,
title: data[index].text
});
});
});
$('#toggle_providers_calendar').change(function() {
toggleResource($('#toggle_providers_calendar').val());
});
The resources show/hide just fine based on the selected menu resource, but look at the allday blocks - they don't line up after the resources are refetched for some reason. They correct themselves as the user navigates the scheduler though!
UPDATE BELOW
After looking around it looks like when refetchevents is called, the class .fc-week loses the following css:
style="border-right-width: 1px; margin-right: 20px;"
Here's a full pic of the calendar on initial load:
After I click a one of the navigation arrow, the all-day lines meet up with the rest of the calendar times because that style is applied to .fc-week.
I don't have any special css applied to the calendar and I am not using any themes that would get rid of this: at least not that I see now.
Here's the html that houses the calendar:
<div class="portlet-body">
<div class='loader'></div>
<div class="row">
<div id="calendar_full" style="padding-left: 10px; padding-right: 15px;"></div>
</div>
</div>
In order to fix this, I can add this following line after the resources are refetched in my toggleResources function:
$('#calendar_full .fc-week').css('border-right-width', '1px').css('margin-right', '20px');
I am going to keep looking as to why this css disappears after the resources are refetched. I wonder if it could be a glitch?
I am using offline.js (0.7.18) and its working fine, when I go on/offline the indicator changes state, all good so far.
I can also see on Offline JS Simulate UI, that a login panel is having its style toggled between display:block and display:none when on/offline is triggered. But I can't discover how this works.
I want to hide a 'Submit' button when offline is triggered.
You can use the sample from the Offline JS Simulate UI page that uses jQuery:
<script>
$(function(){
var
$online = $('.online'),
$offline = $('.offline');
Offline.on('confirmed-down', function () {
$online.fadeOut(function () {
$offline.fadeIn();
});
});
Offline.on('confirmed-up', function () {
$offline.fadeOut(function () {
$online.fadeIn();
});
});
});
</script>
Give the class "online" to any element you want shown when the system is online and give the class "offline" to any element you want shown when the system is offline.
<button class="online">ABC</button>
I'm trying to use redactor.js to edit in place some divs in meteor;
in the template I have:
<template name="home">
<section class="editable">
</section>
...
</template>
and in the js:
Template.home.events({
"click section.editable": function(event) {
$(event.target).redactor();
},
});
this creates the redactor wysiwyg editor correctly when I click on the section; the problem is that by clicking again, another editor (nested inside the previous one is created); I'm trying without success to limit the execution of redactor() method only if the editor is not there already.
Could you wrap the state in a session variable? Of course, you'd need to set it back again once the redactor was finished (maybe try hooking into a blur event?)
Template.home.events({
"click section.editable": function(event) {
var isEditorActive = Session.get("editorActive", false);
if (!isEditorActive) {
Session.set("editorActive",true);
$(event.target).redactor({
blurCallback: function(e)
{
Session.set("editorActive",false);
this.core.destroy(); // destroy redactor ?
}
});
}
}
});
PREVIOUSLY:
Is there a particular reason you want to use meteor events for this? You could just use redactor.
if (Meteor.isClient) {
Meteor.startup(function() {
$('section.editable').redactor({
focus: false
});
});
}
Following the example here I've tried doing the same but the query doesnt work for me.
http://jsfiddle.net/qDbd5/
require(["dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (parser, ToolBar, ToggleButton, query, domClass, on) {
on(query(".dijitToggleButton"), "click", function (e) {
query(".dijitToggleButton").forEach(function (node) {
console.log('Captured clicked event');
domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
});
I'm trying to make only 1 button toggle at a time.
Why the click event not triggered?
Wrapping everything in a ready() callback solves the problem.
See http://jsfiddle.net/cFQGq/
require(["dojo/ready", "dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (ready, parser, ToolBar, ToggleButton, query, domClass, on) {
ready(function() {
on(query(".dijitToggleButton"), "click", function (e) {
query(".dijitToggleButton").forEach(function (node) {
console.log('Captured clicked event');
domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
});
});
If you look at the explanation of domReady!, it mentions that it is insufficient for working with dojo widgets, because it executes after the DOM has loaded instead of after the widget has finished initializing. dojo/ready executes the callback after the widgets have finished loading.
I have a question concerning functions with jQuery. I have a function that once the browser is ready the function finds a specific table and then adds hover & click functionality to it.
I am trying to call this function from code behind in an asp .net page due to the fact that once someone adds to the database the update panel fires and retrieves a gridview (the table that has been affected by the function at document.ready). When it comes back it is the plain table again.
Here is the original functions:
$("#GridView1").find("tr").click(function(e) {
var row = jQuery(this)
//var bID = row.children("td:eq(0)").text();
$('#tbHiddenBatchID').val(row.children("td:eq(0)").text());
//Took out repetitive code, places values from table into modal
e.preventDefault();
$('#modalContentTest').modal({ position: ["25%", "5%"] });
//row.addClass('highlight');
//$('#tbEdit').val(bID);
});
//here is the function that adds hover styling
$("#GridView1").find("tr").click(function() {
return $('td', this).length && !$('table', this).length
}).css({ background: "ffffff" }).hover(
function() { $(this).css({ background: "#C1DAD7" }); },
function() {
$(this).css({ background: "#ffffff" });
});
OK, what I tried to do is create a function, call it on document.ready and also in the code behind when after the database has been updated.
Here's what I did:
function helpGrid() {
$("#GridView1").find("tr").click(function(e) {
var row = jQuery(this)
//var bID = row.children("td:eq(0)").text();
$('#tbHiddenBatchID').val(row.children("td:eq(0)").text());
//
e.preventDefault();
$('#modalContentTest').modal({ position: ["25%", "5%"] });
//row.addClass('highlight');
//$('#tbEdit').val(bID);
});
//Haven't even tried to add the hover stlying part yet; can't get this to work.
}
When I try to call helpGrid(); I get an error that's it not defined...
Obviously I'm a jQuery newb but I do have jQuery in Action & I'm scouring it now looking for an answer...
Please help..
Thanks!!!
Since you are using an update panel, the entire page does not postback and the document.ready stuff never gets hit... Below is where you can add a function to run at the end of the update, so resetMyTableStuff(); is where you'll want to do your magic...
Try adding something like this...
function pageLoad() {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);
}
}
function endRequestHandler(sender, args) {
resetMyTableStuff();
}
function initializeRequest(sender, args) {
//just in case you need to do it...
}