I have a custom button that i want to go today day.
customButtons: {
myCustomButton: {
text: 'Día Actual',
click: function(info) {
calendar.fullCalendar('today');
}
}
}
But my error is a fullCalendar('today') dont exist on v4. I can do this the other way
You're correct that calendar.fullCalendar('today'); no longer works in version 4. However this is simply due to a change of syntax. It has been directly replaced by the today method. Therefore this code:
click: function(info) {
calendar.today();
}
will solve your problem.
This change of syntax is explained in the v3 to v4 upgrade guide and there is a more detailed article in the v4 documentation about calling methods as well.
However I'd also like to point out that if all your button does is change to today's date, you don't even need a custom button at all! As documented in the header options you can simply put today as one of the buttons in the header and fullCalendar will auto-generate a button which moves to today's date.
e.g.
{
left: 'title',
center: '',
right: 'today prev,next'
}
This is visible in most of the demos on the fullCalendar site, including the ones on the home page: https://fullcalendar.io/#demos
I did the following is not the best but it works for me
customButtons: {
myCustomButton: {
text: 'Día Actual',
click: function(info) {
location.href="http://localhost:8888/Proyecto/calendario-plantillas";
}
}
},
Related
I'm using FullCalendar v.3.4.0 with no CSS changes.
I have only the base css and the print version declared.
As you can see on the picture, the last event, that starts near midnight, is getting cut visually.
In Fullcalendar's Github, there is a sticky issue regarding Chrome's rendering of the table, but I'm not sure if the problem lies there.
I haven't tried Firefox, but I'm running this in a webview of a Cordova app on Android, so i'm bound to Chrome.
example of the issue
Init code
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
Can I add a "ghost" event so it pushes the overflowed view in order to see that event? I would like avoid jquerying my way into the DOM, but if there is no other change I will do so.
Thank you in advance.
Best regards
I have solved with the following steps:
Backend
Added a field called "time" ( or any field you wish to use ) and whenever you detect the end date goes to the next day you set "time" to "23-59".
Frontend
Add the following code to your Fullcalendar init:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
This is not an elegant solution for v3 but it suits my requirements.
I am trying to include a caption on the actual webpage under the image while using the magnificence popup gallery. Using a div and class caption or carousel-caption, I am unable to do so without the images in the gallery stacking vertically one by one. How can I do this?
<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
<img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true}
// other options here
// end each line (except the last) with a comma
});
});
js fiddle: https://jsfiddle.net/sb4btox7/
Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.
Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://
Solution:
You are halfway there. There are 2 parts to making the captions work.
You correctly have put the link in the anchor tag and not the
image tag
You must specify your title source in your
initialization script like this.
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true},
type: 'image',
image: {
titleSrc: 'title'
// this tells the script which attribute has your caption
}
});
});
The script then automatically writes your caption to its div labeled class="mfp-title"
BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:
titleSrc: 'title',
titleSrc: function(item) {
return '' + item.el.attr('title') + '';
}
This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section
I tried to use the selected answer, but even using the documentation, the examples wouldn't work for me. What I ended up using was:
$('.elements').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
image: {
titleSrc: function(item) {
return item.el.find('img').attr('title');
}
}
});
This probably has something to do with the version I was using, but it wasn't clear what version the documentation was for. Hopefully this is useful to someone.
I would like to change the standard "pen" icon of the
StandardListItem of type DetailAndActive
. Is there a way to do so?
my XML so far:
<List
id="master1List"
items="{/path}"
mode="{device>/listMode}"
select="onSelect"
itemPress="showDetail"
growing="true"
growingScrollToLoad="true">
<items>
<StandardListItem
type="DetailAndActive"
activeIcon="sap-icon://message-information"
id="master1ListItem"
press="onSelect"
title="{title}">
</StandardListItem>
</items>
</List>
As far as I know there are only properties "icon" (which I do not need) and "activeIcon" (which I set but which is also not shown on itemPress/tab). I thought I might change it via css, but it is set in a data-attribute (Icon font, not a uri I could overwrite) and then applied:
.sapUiIcon:before {
content: attr(data-sap-ui-icon-content);
...
Thanks..
[EDIT:]
I accepted the below answer as correct because it works. BUT as you can read in my comment, I'd like to make it possible to accept Controls by using the aggregations metadata like described here:
metadata: {
aggregations: {
"Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
},
defaultAggregation: "Button"
},
This works so far that that I am now allowed to add a Button control to the ListItem in my XML view, but it is not rendered :-) Any ideas what I miss here additionally?
The icon is hardcoded deep in the control. I found I can extend the StandardListItem to get the result you want like this.
sap.m.StandardListItem.extend('my.StandardListItem', {
renderer: {},
constructor: function(sId, mProperties) {
sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
var sURI = sap.ui.core.IconPool.getIconURI("action");
this._detailIcon =
new sap.ui.core.Icon({
src:sURI})
.setParent(this, null, true)
.addStyleClass("sapMLIBIconDet");
}
});
There is a working example at http://jsbin.com/tuqufe/1/edit?js,output
The bad news is that in the next release (1.28.?) the way that this is done changes significantly so you will need to redo the extended control.
[EDIT:] Sorry I forgot about this one. I just built a quick sample with the OpenUI5 V1.30 beta library. Now the key code looks like this...
sap.m.StandardListItem.extend('my.StandardListItem', {
metadata: {
properties: {
"detailIcon": "string"
}
},
renderer: {},
setDetailIcon: function(icon) {
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
}
});
There is a sample at http://jsbin.com/bayeje/1/edit?js,output
I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.
The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.
The second option is to create a custom button, so far I have this piece of code:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
It works somehow, but it's buggy and produces strange html like so:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
Any help with getting this done for either option one or two would be greatly appreciated.
If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.
LATER EDIT:
Here is a jsFiddle for it http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}
I am using related Shield UI ASP.NET Charts on a web page. What I need is to be able to provide the user the option to choose whether to show the dataPointText or not. For that purpose I have put a checkbox below the second grid and am trying to use the following code:
detailChartElement.shieldChart($.extend(initialOptions, {
primaryHeader: {
text: headerText
},
if (document.getElementById("CheckBox1").checked == true){
seriesSettings: {
line: {
dataPointText: {
enabled: true,
borderColor: 'red',
borderWidth:3
}
}
},
},
but when I put the code and none of the grids on the page shows. I checked quite carefully the code but don’t see any missed out commas or anything that should prevent it from working.
The mistake you are making is not syntactical but conceptual. Within the code that creates the chart:
detailChartElement.shieldChart($.extend(initialOptions, {
}));
you may place nothing but the properties of the Shield UI ASP.NET chart and their properties. You may not have any logical checks like IF(). However you may have additional variables and their values.
With this in mind you could use the following workaround:
In the function you use to recreate the chart you place the following code:
var showlabels = document.getElementById("CheckBox1").checked;
Than, you put the series settings code in the chart creation routine:
seriesSettings: {
line: {
dataPointText: {
enabled: showlabels,
borderColor: 'red',
borderWidth:bordersize
}
}
},
The properties and values will be always there, however they will be enabled only when the checkbox is checked.