I am trying to create a custom event tile in FullCalendar. I want to show the title on one line and an extendedProps entry on the next one. Now I found 2 ways to achieve either HTML or using args:
eventContent: (arg) => ( arg.event.title + ' ' + arg.event.extendedProps.places + ' Places')
or
eventContent: { html: 'Title <br> places'}
What I am wondering is if there is a way to use both.
You can inject into the HTML with properties of the event as follows:
eventContent: function(eventInfo) { return { html: eventInfo.event.title + "<br> " + eventInfo.event.extendedProps.places + " Places" } }
Related
I have implemented aria-autocomplete and twitter/bloodhound typeahead.
Problem: It is partially working in the sense that it retrieves the value, but I want it to be automatically selected.
When I type in a Member ID, I want it to automatically select the name in a div below, and in a hidden textbox (which is later checked if there is a value, before allowing user to go to next screen)
What I've tried:
I have read the following:
https://msdn.microsoft.com/en-us/ie/hh968240(v=vs.94)
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
I then changed "aria-autocomplete": "list" to "both" as well as "inline" and neither had an affect.
I then changed my textbox from autocomplete off to autocomplete on with no effect:
I then read about typeahead, but I am not understanding why the autocompleted is not having an affect either. Here is the code for that:
.
displayKey: function (item) { return item.Subscriber_ID },
templates: {
//Template to show if there are no results
empty: function (context) {
// console.log(1) // put here your code when result not found
$(".tt-dataset").text('No Results Found');
},
suggestion: function (item) {
return '<div class=""> ' + item.First_Name + " " + item.Last_Name + '</div>';
}
}
})
.
I resolved this by adding some code to the suggestion function, to add a TextBox that the c# should look at , instead of having it look at it after the click:
$('#suggestionName').val(item.First_Name + " " + item.Last_Name); //used to check whether there is a value when hitting submit (hidden field)
$('#divDisplayMemberName').html(item.First_Name + " " + item.Last_Name); //displays it in a <p> tag underneath the TextBox
return '<div class=""> ' + item.First_Name + " " + item.Last_Name + '</div>'; //displays the actual suggestion
My problem is I have a plugin which works fine when there is only 1 CKEditor in the page. You can open and close the custom plugin dialog as many times as you want, and make all your changes.
However, as soon as you open the plugin on any of the other CKEditors on the page, the values from the previous CKEditor instance are still present, and a lot of quirks happen.
I tried using the dialog.destroy() function, which "fixes" the issue - meaning you can now use it fine on all the different CKEditor instances. But it breaks the current instance, meaning if you try to open any you already used again, it doesn't work (since the dialog has been destroyed). I tried using reset() and replace() to no avail.
Maybe it has something to do with the fields themselves... here is a sample from the dialogs/my_plugin.js file:
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: 'icon_with_options',
html: '<div id="selected-icon"></div>',
},
{
type: 'html',
id: 'osu_icon_color',
html: '<div class="osu-colors"><label>Click on a color <input id="osu-icon-color" type="text" value="osu" readonly/></label>' +
'<p class="osu color-active"></p>' +
'<p class="sand"></p>' +
'<p class="stratosphere"></p>' +
'<p class="moondust"></p>' +
'<p class="dark"></p>' +
'<p class="pine-stand"></p>' +
'<p class="luminance"></p>' +
'<p class="reindeer-moss"></p>' +
'</div>',
onLoad: function () {
(function ($) {
var colors = $('.osu-colors p');
colors.click(function (e) {
colors.removeClass('color-active');
var className = e.currentTarget.className;
document.getElementById('osu-icon-color').value = className;
icon_preview();
$(this).addClass('color-active');
});
})(jQuery);
},
},
I wonder if the problem is that most HTML is decoration.
I did samples with the plugin using regular type:text and type:select and these worked fine. But somehow the type:'html' does not clear the same way and is causing issues. Unfortunately all examples online are of simple text elements or other prebuilt elements.
Any help is appreciated. This is a plugin inside a Drupal 7 module, but it should apply regardless.
I am sure there are better ways of doing this, but what I ended up doing was:
Since CKEditor gives unique names to every instance of the editor, I used: CKEDITOR.currentInstance.name as an ID that wraps around all the html in the plugin.
Modified my javascript to target everything based on the CKEDITOR.currentInstance.name and any particular ID or class I needed to make it happen.
Now since each instance is differentiated by that ID, all the CKEditor instances in a page work fine.
I am using ASP.NET MVC. I want to make the Account_Number column as HTML link in the Ajax Bound Kendo UI grid, when it is not searched by Account_Number from previous page. And when clicked on the Account_Number link, it should pass the Account_Number to the Customer controller method 'QuickCheckSearch'.
The below code does not populate the grid in view and also do not call/pass the value to the controller. Could someone please correct the following code?
Thanks in Advance.
columns.Bound(p => p.Account_Number)
.ClientTemplate("<#if (item.Account_Number == Model.AccountNumber){>Account_Number <# }" + "else{#><a href='" + Url.Action("QuickCheckSearch", "Customer") + "?Account_Number=#=Account_Number#'>#= Account_Number #</a> <# } #>")
.Title("Account Number");
Read http://docs.telerik.com/kendo-ui/framework/templates/overview
You have way too many angle brackets all over the place. You should only have them on the actual HTML markup of the template, not as part of the template syntax itself. Try:
.ClientTemplate(
"# if (Account_Number ==" + #Model.AccountNumber + "){ #" +
"#= Account_Number #" +
"# }" +
"else { #" +
"<a href = '" + Url.Action("QuickCheckSearch", "Customer") + "?Account_Number=#=Account_Number#'>#= Account_Number#</a>" +
"# } #"
)
I find it really helps to format it on separate lines just like you would write actual code instead of all on one line so you can see the structure visually.
You could also do it this way, which may be cleaner:
.ClientTemplate("#= accountLinkTemplate(data) #")
....
<script>
function accountLinkTemplate(data) {
var template = data.Account_Number;
if (data.Account_Number == " + #Model.AccountNumber + ") {
template = "<a href = '" + "#Url.Action("QuickCheckSearch", "Customer")" + "?Account_Number=" + data.Account_Number+ "'>" + data.Account_Number+ "</a>";
}
return template;
}
</script>
I have event sources added to a fullcalendar object dynamically (addEventSource).
I do not understand how to reference these event sources to remove them with removeEventSource.
I have an example here:
http://jsfiddle.net/64L4npzo/
calendar = jQuery("#calendar").fullCalendar();
event_count = 0;
jQuery(document).on("click", ".add_random_event", function() {
event_count++;
var json_source = [ { title : 'event to remove', start : '2015-11-04' } ];
calendar.fullCalendar('addEventSource', json_source);
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").appendTo("#event_removal");
});
jQuery(document).on("click", ".remove_event_source", function() {
calendar.fullCalendar("removeEventSource", jQuery(this).attr("event_count"));
console.log("Tried to remove event #" + jQuery(this).attr("event_count"));
});
I've read this solution but I'm not sure how to apply it: Problem removing event sources from FullCalendar (jQuery)
If you attach your source object as a data attribute to the 'remove this source' button, you can then use that data attribute later as the source in the removeEventSource method.
During addEventSource:
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").data('source', json_source).appendTo("#event_removal");
When using removeEventSource:
calendar.fullCalendar("removeEventSource", jQuery(this).data('source'));
I've also made a few changes to make sure your source object is unique and updated the jsfiddle: http://jsfiddle.net/64L4npzo/4/
To remove events, you need a source. The source may be an object that provides some data about events.
You can see the list of event source options here
So, in your case, I add a className to events and the events would be referred by that className.
calendar = jQuery("#calendar").fullCalendar();
event_count = 0;
var json_source = [ { title : 'event to remove', start : '2015-11-04', className: 'test' } ];
jQuery(document).on("click", ".add_random_event", function() {
event_count++;
calendar.fullCalendar('addEventSource', json_source);
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").appendTo("#event_removal");
});
jQuery(document).on("click", ".remove_event_source", function() {
calendar.fullCalendar("removeEventSource", json_source);
console.log("Tried to remove event #" + jQuery(this).attr("event_count"));
});
The updated fiddle is here.
http://jsfiddle.net/64L4npzo/1/
I have a custom module with some simple code:
function theme_extras_form_alter(&$form, &$form_state, $form_id) {
if ($form['#id'] == 'views-exposed-form-blog-posts-page') {
$form['field_post_type_tid']['#options']['All'] = t('Refresh');
$form['field_post_type_tid']['#options']['3'] = t('<i class="icon-twitter"></i>');
}
}
The first replacement works beautifully, but the second renders as plain text, rather than html. I need to do this for every form element (in fact, refresh will even be replaced with an icon further down the road). What am I missing here to properly output the html?
I decided to pull this off using jQuery, as achieving the desired affect using a custom module was not pragmatic and may have, in fact, been overkill. Following is the poorly refactored but working code which got me there:
(function($) {
$(document).ready(function(){
var link = '<a href="http://project.local/blog-posts?field_blog_post_type_tid=',
id = '#edit-field-blog-post-type-tid-';
$(id + 'all').html(link + 'All"><span class="icon-container"><i class="icon-undo"></i></span></a>');
$(id + '3').html(link + '3"><span class="icon-container"><i class="icon-music"></i></span></a>');
$(id + '2').html(link + '2"><span class="icon-container"><i class="icon-camera"></i></span></a>');
$(id + '5').html(link + '4"><span class="icon-container"><i class="icon-quote-right"></i></span></a>');
$(id + '1').html(link + '1"><span class="icon-container"><i class="icon-file-text-alt"></i></span></a>');
$(id + '4').html(link + '4"><span class="icon-container"><i class="icon-film"></i></span></a>');
});
})(jQuery);