Intro:
Primefaces p:schedule uses FullCalendar, so I must ask if FullCalendar can do what I need. If FullCalendar cannot then I will know that Primefaces cannot either.
Question: (short to be clear)
Is there any way to customize event label?
I would like to have label (without hour) with three lines, for example:
Negiotiations
Scott Tiger
level: hard
As you see second line is bold, and in third line we have italic text. Is possible to achieve something like this out of the box? If not any sugestions how to do that?
An old post, but my question was the same.
Now with FullCalendar version 2.7.3 you can modify event label with eventRender attribut.
See the example :
var calendar = $("#calendar").fullCalendar(
{
//...
eventRender: function(event, element) {
console.log(event);
console.log(element);
element.text("a bigger text for this object, you can modify element as you want now with another label");
},
//...
}
I hope my answer will help.
After checking source code (version 1.6.4) the answer is:
This is not possible
In order to achieve this, source code has to be modified.
Related
I'm using Wordpress Visual Composer and would like a button to have a smooth scroll down to a specific section on the same page.
I've explored the standard button element's "insert inline onclick javascript action" with anchor IDs and code from many other similar Q&As, but have had no luck. Does anyone have the answer specifically to Wordpress Visual Composer?
(Below are screenshots of how I tried to implement #Frits suggestion.)
Button href
Raw JS block
In future, adding your current attempt is a great idea as it will help us adjust your code. You've clearly tried some things, they clearly didn't work (else you wouldn't have come here) - show us what you tried, and we might be able to help you fix your current attempt!
Anyways, on to the actual code.
Seeing as you are missing a bit of information, I am going to have to make a few assumptions.
I am going to assuming that you have a button that looks like this:
Click here to scroll down
and I am going to assume that you have given your visual composer row an ID of my-visual-composer-row-id (you can do this under the edit options on the actual row itself)
If you're ok with using jQuery, you can then implement the following either in a RAW JavaScript block somewhere (preferably the bottom of the page), or if you're making your own theme, you can add this to your .js file.
jQuery(document).ready(function($){
$('.my-link, .my-link a').click(function(e){
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
if (target.length) {
jQuery('html, body').animate({
scrollTop: Math.ceil(target.offset().top)
}, 1000);
return false;
}
}
});
});
this has been adapted from the CSS-Tricks smooth scrolling solution which can be found here.
I realise this is quite an old post but this just worked for me...
To achieve this in Visual Composer frontend editor, add your anchor id to the Anchor field for the row you want to jump to.
In the Row Setting dialogue, under the Anchor text field you can see a hint that says:
'If anchor is "contact", use "#!/contact" as its smooth scroll link.'
e.g http://domainname.com/page-name/#!/contact
Hope that helps,
Ben
So we currently have Jira in our workplace and no Jira Administrator. I'm feeling up to the task and would like to know if Jira has the functionality I'm looking for.
So when you have comments in Jira or even in the body of a Jira ticket. You can italicize the text from the comment ribbon
As you can see I am interested in being able to have the same functionality as bold or italicize or underline
but I want to be able to highlight some code that i insert in a ticket comment and click a button and make it into a code block. Or add curly brackets and make it a quote... Exactly like how StackOverflow does it.
Anyone know how I can accomplish this?
This is quite old question but it might help someone else looking for an answer later...
If you're familiar with JavaScript, simply inject a button via JS onto the toolbar. I've done this for a couple of custom fields. Such JS can be included in the custom field's description.
Example
In my case, I've added two buttons on two custom fields to copy original content from Summary/Description. You can adjust the code to do a whatever action on any custom field or comment field.
Screenshot
Code
Code to be included in the custom field's description. Adjust your code to place the JS into appropriate elements.
<script>
var cfAltDescription = 14705;
var elAltDescription = AJS.$("#customfield_" + cfAltDescription);
function addDescriptionButton() {
var buttonHTML = ' <button type="button" class="aui-button" style="font-size: 11px;padding: 1px 5px;" title="Paste original description into this field" onclick="copyDescription()">< Description</button>';
AJS.$(".jira-wikifield[field-id=customfield_" + cfAltDescription + "] ~ .wiki-button-bar").append(buttonHTML);
}
function copyDescription() {
var origDescription = AJS.$("#description").attr("value");
elAltDescription.attr("value", origDescription);
// set focus in the input box after copying...
elAltDescription.focus()[0].setSelectionRange(0, 0);
elAltDescription.scrollTop(0);
}
addDescriptionButton();
</script>
For comments, you cannot inject JS into the custom field description (comments are not a custom field). You will need to include your JS either via Announcement Banner (this would be global JS for any Jira page). Alternatively, you can utilize simple yet powerful JsIncluder add-on to inject your own JS code only for certain project/issuetype or globally and/or for edit/transition screens only.
I think you can use plugin for this. jeditor plugin gives you more options in text editors. all information you need is provided in above link.after installing this plugin you can change the text renderer as "JEditor Renderer".
Marketplace: https://marketplace.atlassian.com/plugins/com.jiraeditor.jeditor
or you can use.....
Note:-I guess this is not the exact answer you need but I think you can use macros inside the comment field. ex:if you want to add panel in inside of comment you can simply use
{panel}Some text{panel}
{panel:title=My Title}Some text with a title{panel}
{panel:title=My Title| borderStyle=dashed| borderColor=#ccc| titleBGColor=#F7D6C1| bgColor=#FFFFCE}
a block of text surrounded with a *panel*
yet _another_ line
{panel}
and if you want to add code you can use...
--- Java example ---
{code:title=Bar.java|borderStyle=solid}
// Some comments here
public String getFoo()
{
return foo;
}
{code}
*--- XML example ---*
{code:xml}
<test>
<another tag="attribute"/>
</test>
{code}
here is a example screenshot..
follow this link for more information..
UPDATE
with the plugin you can get something like this..I think this will helps you.
Im using Adam Shaw's FullCalendar (http://fullcalendar.io).
I'm looking for a way to show a tooltip at the mouse pointer when a user resizes an event in the calendar. I'd like it to show the actual event length, and should be updated as the user drags.
When looking in the documentation i can't seem to find any method for this.
Has someone any suggestions for this?
Thanks, Simon
You can use qtip plugin and then use it like in the documentation example for event render
In addition, to get the length you can do it with moment.js difference method as you can check in this plunker.
So finally you got something like:
eventRender: function(event, element) {
element.qtip({
content: event.end.diff(event.start, 'minutes')
});
}
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 :)
On the month view, is there a way to display an image along with the event "title"? (The events would be categorized and there would be a separate image for each category. )
On the week/day views, can an image be displayed along with other information?
I've read through the documentation and dozens and dozens of the questions here (and learned a lot from the answers), but didn't see this addressed. (A background image for the event won't work for this.) If I replace the title text with the img tag, the tag itself is displayed rather than rendering the image.
I'm a rookie at this (jQuery, etc.), so sorry if this is a silly question. I'm off to read the documentation again.
Simply add another name value pair to the data-in. In this case, I have added ...imageurl:value...
[{title:'Language - Session Title',dow:[1,2,4], start:'10:30:00', end: '11:00:00'},
{imageurl:'images/flag/flag_india.png', title: 'Meeting',start:'2017-04-25T10:30:00'}];
$('#calendar').fullCalendar({
......
eventRender: function(event, eventElement, view) {
if (event.imageurl) {eventElement.find(".fc-title").prepend("<img src='" + event.imageurl +"'> ");}}
......
}