I'm using the full-calendar component for Angular and I want to customize the content of each date cell according to different conditions. For example if the date is invalid (I have a function that validates the date), I want to change the date's cell background color. Otherwise, if its valid I want to add a plus button inside to add events. Besides that I want to add custom animations and hover effects.
How can I take control of the date is being render ?
I manage to change the background color with dayCellDidMount hook:
dayCellDidMount: (arg) => {
if(!this.dateIsValid(arg.date, arg.isPast)){
arg.el.style.backgroundColor = "#eeeeee";
}
},
I don't think that's the best way to do it and I still can't manage to add the plus button inside the cell.
Can someone achieve this or something similar? Your help would be appreciated, thanks.
If you know another calendar to integrate with Angular that has this features I'm open to suggestions.
Related
Is there a way to change the font of Time4J CalenderPicker in css-style?
I needed a Persian DatePicker in my program so i used Time4J CalenderPicker.
using this code i could change only the font of cells:
CalendarPicker<PersianCalendar> MyDatePicker = CalendarPicker.persianWithSystemDefaults();
MyDatePicker.setCellCustomizer(
(cell, column, row, model, date) -> {
cell.setStyle("-fx-font-family: MyFont;");
}
);
I tried this code but nothing changed:
MyDatePicker.setStyle("-fx-font-family: MyFont;");
But i want to change the font of hole CalendarPicker.
In order to apply the changes, you need to use the following code and set new css styles for calender picker and applying the customizations.
private CalendarPicker<PersianCalendar> MyDatePicker = CalendarPicker.persianWithSystemDefaults();
MyDatePicker.getStylesheets().add("/MyCSS-Style.css");
The following gif, demonstrates my customizations.
The calendar picker itself is only the combination of a text editor and a popup button (bundled in a HBox). However, the calendar view is another component which pops up if users press the button. And this component whose font you wish to change is not yet publicly accessible (with the exception of the cells via a special customizer).
I agree that this should be more flexible. Therefore I have opened a new issue to track this request for enhancement.
Feel free to fork Time4J and do your experiments and submit a pull request on time4j-github. Actually I am busy with other things but can look deeper then.
Normally, with Materialize, the labels for text input boxes show up inside the input boxes until a user enter selects the box and enters text in it. However, when a box's value is filled via javascript, the label does not move out of the way. It stays in the box and overlaps with the text entered. Is there a way to trigger the label transition with javascript as well, so this doesn't happen?
More specifically, if you are using Materialize in Rails with turbolinks enabled, you will find that Materialize form fields which are prefilled with non-empty values are not active on page load.
The following method worked for me:
$(function() {
M.updateTextFields();
});
It will add class 'active' to both corresponding labels and prefix icons.
The label transition behavior is triggered by adding the active class to the label's element. Thus, if you make your javascript add that class to the label (e.g. $('label').addClass('active')) in addition to filling in the field, the label will transition out of the field just as it would when selected by a user action.
If you use labels, you will use:
$("label[for='idTag']").addClass('active');
The document.ready event only fire once when turbolinks is working, so instead you need to tap into the turbolinks load event.
It happens so fast that if you want to see the animation, wrap it in a tiny timeout.
With timeout/visible animation
document.addEventListener('turbolinks:load', () => {
setTimeout(() => {
M.updateTextFields();
}, 100);
});
Without timeout/visible animation
document.addEventListener('turbolinks:load', () => {
M.updateTextFields();
});
Rails 5 with Turbolinks, and Materialize CSS 1.0.0
Add class="active"into the label tag associated with the input field.
With JQuery you can use
$('#yourInputText').change();
If you are using older version (0.x) of Materializecss, use:
Materialize.updateTextFields();
instead of:
M.updateTextFields();
For anyone looking for solution in ReactJS:
link the value property of the input to some value in your Component's state. (Eg: value={this.state.name})
Add the line document.M.updateTextFields() to the componentDidMount() lifeCycle method of your Component.
The above solution helps when there are certain values which need to be prefilled into a Form. (Eg: Update Details Form)
I have event populating my full calendar and I'd like to add an icon to some of the events that meet a certain criteria. For example, my calendar events are representations of work orders that will be added to routes. So if a work order is in a route, I'd like the event that represents that work order to have an icon in the title that signifies that it is part of a route.
I could just change the event's color, but I'd like more than just color. Am I asking too much? Is this possible?
eventRender: function(event, element, calEvent) {
element.find(".fc-event-title").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"images/on1.jpg\" />"));
}
Sure you can. In eventRender you can look for and manipulate .fc-event-title (mind that some "short" events may not have this markup), or just add a class with an image background, or add a dingbat (bullet here), like:
.fcimg .fc-event-title:before {content: "\025cf\00020";}
You may also do a little modification in the plugin that is in DayEventRenderer.js file goto "daySegHTML" function and in that right after the condition if (!event.allDay && seg.isStart) (that is the start of the making of event div itslef) insert the following statement:
if (event.imgSource != '')
html += "<div><img src='" + event.imgSource + "' style='display:inline;width:2.0em;height:2.0em;margin-bottom:0.5em'></div>";
Note that event.imgSource is not the builtin event property but you have to provide it while providing the event data.
So if you dont provide event.imgSource nothing will get included and if you provide the image source it will automatically add it.
Hope this will resolve the issue :)
I'm trying to build a firefox extension which can get rss feeds and display them in a popup panel. But I'm not aware about how to display feeds in a panel(I know how to display static text).Because the feed is varying all the time.
Any help regarding this matter will be appreciated.
Thanks in advance.
How about using setInterval to call a function that redraws the panel at the time interval you specify?
You can create DOM elements inside a XUL popup panel using JavaScript, but you have to remember that the panel requires the XHTML namespace:
<panel id="your-id" noautohide="true" xmlns:html="http://www.w3.org/1999/xhtml">
and instead of using:
document.createElement("p"); //for example
you would need to use:
document.createElementNS("http://www.w3.org/1999/xhtml","html:p");
You can get the popup reference by id and just create and append elements as you need them. Then the following might help:
https://developer.mozilla.org/en/XUL/PopupGuide/OpenClose:
I'm customizing a NewForm.aspx page and I've created a few new SharePoint:FormFields in the form of textboxes. I'm looking to customize the height of these boxes on a case-by-case basis, but I can't figure it out.
I've looked into DisplaySize, but that only controls the width of a specific textboxe, and I've seen adding in:
style> .ms-long{width:100px;} </style>
but that changes every SharePoint:FormField size, not just one.
Any help would be great! Thanks!
I've done this before using jQuery. With jQuery you can query dom elements (ie. fields) by an attribute of your choice (e.g. the attribute title) and the manipulate it. See Jan Tielens Series about integrating SharePoint and jQuery. http://weblogs.asp.net/jan/archive/2008/11/20/sharepoint-2007-and-jquery-1.aspx
Or just google sharepoint + jquery.