In eventRender how do I know if we are viewing
'timelineDay' or 'timelineWeek' or 'timelineMonth'
to customize the events according to the view??
header: {
left: 'prev today next',
center: 'title',
right: 'timelineDay,timelineWeek,timelineMonth',
},
Thanks
var timeline = $('#calendar').fullCalendar('getView').name;
if (timeline ==="timelineWeek"){
var eventcustom =
'<div class="wrapper-event-weekly">'
+'<div class="box-event-weekly box-event-ico col-1">'
+'<i class="'+e.icon+' fa-2x"></i>'
+'</div>'
+'<div class="box-event-weekly box-event-title col-10">'
+'<span>'+e.odldesc+'</span></br>'
+'<span><b>'+e.odlnum+'</b></span>'
+'</div>'
+'<div class="box-event-weekly box-event-info col-1">'
+'<i class="'+note+' fa-lg"></i>'
+'</div>'
+'</div>';
}
else if (timeline ==="timelineMonth"){
var eventcustom =
'<div class="wrapper-event-month">'
+'<div class="box-event-month box-event-ico col-12">'
+'<i class="'+e.icon+' fa-2x"></i>'
+'</div>'
+'<div class="box-event-month box-event-title col-12">'
+'<span>'+e.odldesc+'</span></br>'
+'<span><b>'+e.odlnum+'</b></span>'
+'</div>'
+'<div class="box-event-month box-event-info col-12">'
+'<i class="'+note+' fa-lg"></i>'
+'</div>'
+'</div>';
}
Related
in the resources I would like to add an icon with an ID inside that I can pass on.
I tried with resourceLabelContent but it doesn't work for me
resourceGroupField: 'mygroup',
resourceColumns: [
{
labelText: 'Unità ',
field: 'title',
},
{
labelText: 'Telefono',
field: 'Tel',
},
],
resources: {
url: 'fetch-resource.php',
method: 'POST',
},
resourceLabelContent: function (arg)
{
return { arg.resource.title + "'<i class="fas fa-users">'+arg.resource.myid+'</i>'"};
},
I solved it in part .... I modified the JS schduler so, in this way it puts the icons in the resources
ResourceRow.prototype.renderGutterHtml = function() {
var html, i, j, ref;
html = '';
for (i = j = 0, ref = this.depth; j < ref; i = j += 1) {
html += '<a href="#" class="far fa-envelope m-1 text-info sendMail"/></a>';
}
html += '<span class="fc-expander-space">' + '<a href="#" class="fas fa-chart-bar m-1 text-danger graphStat" color=red></a>' + '</span>';
return html;
};
then with "resourceRender" I go to assign the data-id, but then the click on the icon doesn't work
resourceRender: function(resource, cellEls) {
$('.graphStat').attr('data-id',resource.id);
$('.graphStat').on('click', function(e) {
alert($(this).data('id'));
});
},
what am I doing wrong
I have this code that does open Wordpress Media Uploader upon my custom button click and I have everything working from uploading image to selecting an image ... but how do I send the image/attachment to Text editor
jQuery(document).ready( function($){
var mediaUploader;
$('#_button').on('click',function(e) {
e.preventDefault();
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media( {
title : 'My Custom Library',
multiple : false,
library : { type : 'image' },
button : { text : 'Select Image' },
frame : 'post',
state : 'insert',
} );
mediaUploader.on('insert', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
//WHAT TO DO HERE TO SEND THIS TO TEXT EDITOR??????
});
mediaUploader.open();
}); });
Found the answer myself from
https://core.trac.wordpress.org/browser/tags/4.9.8/src/wp-includes/js/media-editor.js#L852
mediaUploader.on('insert', function() {
var embed = mediaUploader.state().get( 'selection' ).first().toJSON();
_.defaults( embed, {
title: embed.url,
linkUrl: '',
align: 'none',
link: 'none'
});
if ( 'none' === embed.link ) {
embed.linkUrl = '';
} else if ( 'file' === embed.link ) {
embed.linkUrl = embed.url;
}
wp.media.editor.insert( wp.media.string.image( embed ) );
});
I tried several ways to set an icon, in the displayfield, when an item of the combo is selected with not luck, this is the fiddle for anyone to want try to help with this. very much appreciated any light.
fiddle example
The only solution is to transform the input type combo in a div with this:
fieldSubTpl: [
'<div class="{hiddenDataCls}" role="presentation"></div>',
'<div id="{id}" type="{type}" style="background-color:white; font-size:1.1em; line-height: 2.1em;" ',
'<tpl if="size">size="{size}" </tpl>',
'<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
'class="{fieldCls} {typeCls}" autocomplete="off"></div>',
'<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
'{triggerEl}',
'<div class="{clearCls}" role="presentation"></div>',
'</div>', {
compiled: true,
disableFormats: true
}
],
Override the setRawValue method of the combo like this:
setRawValue: function (value) {
var me = this;
me.rawValue = value;
// Some Field subclasses may not render an inputEl
if (me.inputEl) {
// me.inputEl.dom.value = value;
// use innerHTML
me.inputEl.dom.innerHTML = value;
}
return value;
},
and style your fake combo div like you want.
Thats because an input on HTML can't have HTML like value inside it.
Keep attenction, the get Value method will return you the HTML inside the div, and maybe you should also override it, but thats the only one method.
You will be able to get the selected value with this method:
Ext.fly(combo.getId()+'-inputEl').dom.innerHTML.replace(/<(.|\n)*?>/gm, '');
If I were you I would like to do something like this:
combo.getMyValue();
So add this property to your combo:
getMyValue:function(){
var combo=this;
if(Ext.fly(combo.id+'-inputEl'))
return Ext.fly(combo.id+'-inputEl').dom.innerHTML.replace(/<(.|\n)*?>/gm, '');
},
Here is a working fiddle
Perhaps my solution is similar to a hack, but it works in 6.7.0 and is a bit simpler.
Tested in Chrome. Theme - Material. For another theme will require minor improvements.
Sencha Fiddle live example
Ext.application({
name: 'Fiddle',
launch: function () {
var store = new Ext.data.Store({
fields: [{
name: 'class',
convert: function (value, model) {
if (value && model) {
var name = value
.replace(/(-o-)|(-o$)/g, '-outlined-')
.replace(/-/g, ' ')
.slice(3)
.trim();
model.data.name = name.charAt(0).toUpperCase() + name.slice(1);
return value;
}
}
}, {
name: 'name'
}],
data: [{
class: 'fa-address-book'
}, {
class: 'fa-address-book-o'
}, {
class: 'fa-address-card'
}]
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
referenceHolder: true,
items: [{
xtype: 'combobox',
id: 'iconcombo',
queryMode: 'local',
editable: false,
width: 300,
valueField: 'class',
displayField: 'name',
store: store,
itemTpl: '<div><i class="fa {class}"></i> {name}</div>',
afterRender: () => {
var component = Ext.getCmp('iconcombo');
var element = document.createElement('div');
element.className = 'x-input-el';
element.addEventListener('click', () => component.expand());
component.inputElement.parent().dom.prepend(element);
component.inputElement.hide();
component.addListener(
'change', (me, newValue, oldValue) => {
component.updateInputValue.call(me, newValue, oldValue);
},
component
);
var method = component.updateInputValue;
component.updateInputValue = (value, oldValue) => {
method.call(component, value, oldValue);
var selection = component.getSelection();
if (selection) {
element.innerHTML =
'<div><i class="fa ' + selection.get('class') + '"></i> ' + selection.get('name') + '</div>';
}
};
}
}, {
xtype: 'button',
text: 'getValue',
margin: '30 0 0 0',
handler: function (component) {
var combo = Ext.getCmp('iconcombo');
alert(combo.getValue());
}
}]
});
form.show();
}
});
I am getting the following error when trying to edit a Wordpress page in visual editor on http://www.domaine-audubert.com.
TypeError: window.tinyMCE.get(...) is null
window.tinyMCE.get( current_id ).setContent( content, {format: 'html'} );
The error seems to be located in wp-content/plugins/fusion-core/admin/page-builder/assets/js/js-wp-editor.js?ver=1.8.1 (line 173 col 7)
In that column I can find this code:
$(self).before('<link rel="stylesheet" id="editor-buttons-css" href="' + fusionb_vars.includes_url + 'css/editor.css" type="text/css" media="all">');
$(self).before(wrap);
$(self).remove();
new QTags(current_id);
QTags._buttonsInit();
switchEditors.go(current_id, options.mode);
if( content && options.mode == 'tmce' ) {
setTimeout( function() {
window.tinyMCE.get( current_id ).setContent( content, {format: 'html'} );
}, 1000);
}
$(wrap).on( 'click', '.insert-media', function( event ) {
var elem = $( event.currentTarget ),
editor = elem.data('editor'),
options = {
frame: 'post',
state: 'insert',
title: wp.media.view.l10n.addMedia,
multiple: true
};
event.preventDefault();
elem.blur();
if ( elem.hasClass( 'gallery' ) ) {
options.state = 'gallery';
options.title = wp.media.view.l10n.createGalleryTitle;
}
wp.media.editor.open( editor, options );
//hide insert from URL
$('.media-menu a:contains(Insert from URL)').remove();
});
}
});
}
})( jQuery, window )
But I have no idea where the error comes from. Is this a common problem and what can I do about it?
I'm trying in my FullCalendar add events to my google calendar, followed the example below,
How to add events to Google Calendar using FullCalendar
but does not work me, if anyone knows how to do please help.
this my code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link href='../fullcalendar.css' rel='stylesheet'/>
<link href='../fullcalendar.print.css' rel='stylesheet' media='print'/>
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='../gcal.js'></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
selectable: true,
selectHelper: true,
var eventData, title;
select: function(start, end) {
title = prompt('Event Title:');
},
editable: true
}
if (title) {
$('#calendar').fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
true // make the event "stick"
);
// Now we push it to Google also :
add_event_gcal(title,start,end);
}
}
$('#calendar').fullCalendar('unselect');
});
});
/****** NOW WE ASK THE EVENT TO BE PUSHED TO GOOGLE **************/
function add_event_gcal(title,start,end) {
alert(title);
// I will create the eventInsert script in a new page, and I name it here :
var url = "php/calendrier_add.php",
data = {'titre_event' :title, 'start' : start, 'end' :end};
// I want to check in the page the result of what happened
$('#gcal_loader').load(url,data,function(responseTxt,statusTxt,xhr){
if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText);
});
}
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#loading {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading'>loading...</div>
<div id='calendar'></div>
</body>
</html>
this is file php
<?php
// variables can only be got with $_REQUEST ?
$titre_event = $_REQUEST['titre_event'];
$start = $_REQUEST['start'];
$end = $_REQUEST['end'];
$allday = $_REQUEST['allday'];
/*$where_event = $_REQUEST['where_event'];
$content_event = $_REQUEST['content_event'];*/
/********************************************
GOOGLE API CONNECTION
********************************************/
/************************************************
Make an API request authenticated with a service account.
************************************************/
require_once realpath(dirname(__FILE__) . '/../google/autoload.php');// or wherever autoload.php is located
$path = realpath(dirname(__FILE__) . '/../google/autoload.php');
/************************************************
The name is the email address value provided as part of the service account (not your address!)
cf. : https://console.developers.google.com/project/<your account>
************************************************/
$client_id = '1020443454327******'; // YOUR Client ID
$service_account_name ='102044345*****'; // Email Address in the console account
$key_file_location = realpath(dirname(__FILE__) . '/../google/Mi proyecto-edc74d9206de.p12'); // key.p12 to create in the Google API console
echo "key".$key_file_location;
if (strpos($client_id, "googleusercontent") == false || !strlen($service_account_name) || !strlen($key_file_location)) {
echo "no credentials were set.";
exit;
}
/** We create service access ***/
$client = new Google_Client();
/************************************************
If we have an access token, we can carry on. (Otherwise, we'll get one with the help of an assertion credential.)
Here we have to list the scopes manually. We also supply the service account
************************************************/
if (isset($_SESSION['service_token'])) {
$client->setAccessToken($_SESSION['service_token']);
}
$key = file_get_contents($key_file_location);
$cred = new Google_Auth_AssertionCredentials(
$service_account_name,
array('https://www.googleapis.com/auth/calendar'), // ou calendar_readonly
$key
);
$client->setAssertionCredentials($cred);
if ($client->getAuth()->isAccessTokenExpired()) {
$client->getAuth()->refreshTokenWithAssertion($cred);
}
$_SESSION['service_token'] = $client->getAccessToken();
/********************************************
END OF GOOGLE API CONNECTION
********************************************/
/*********** AT LAAAAST, WE PUSH THE EVENT IN GOOGLE CALENDAR ***************/
// Get the API client and construct the service object.
$service = new Google_Service_Calendar($client);
// We get the calendar
$calendarId = 'qv8rv593gn5g8pumu0bid6bco0#group.calendar.google.com'; // or whatever calendar you like where you have editable rights
/************* INSERT ****************/
$event = new Google_Service_Calendar_Event(array(
'summary' => $titre_event,
//'location' => $where_event,
// 'description' => $content_event,
'start' => array(
'dateTime' => $start, //'2015-06-08T15:00:00Z'
'timeZone' => 'Europe/Paris',
),
'end' => array(
'dateTime' => $end,
'timeZone' => 'Europe/Paris',
),
/* in case you need that :
'attendees' => array(
array('email' => 'lpage#example.com'),
array('email' => 'sbrin#example.com'),
),*/
'reminders' => array(
'useDefault' => FALSE,
'overrides' => array(
array('method' => 'email', 'minutes' => 20)
),
),
));
$event = $service->events->insert($calendarId, $event);
printf('Event created: %s', $event->htmlLink);
?>
I found the answer
https://developers.google.com/google-apps/calendar/v3/reference/events/insert#examples
1)
//Global variables to access the calendar
clientId = 'Your cliendID',
scopes = 'https://www.googleapis.com/auth/calendar',
calendarId = 'Your google calendar id',
eventsList = [];
//Autorice the user
checkAuth();
//authorization in google
function checkAuth() {
gapi.auth.authorize(
{
'client_id': clientId,
'scope': scopes,
'immediate': true
}, handleAuthResult);
}
//checks if authorized
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
loadCalendarApi();
} else {
handleAuthClick();
}
}
//request credentials
function handleAuthClick() {
gapi.auth.authorize(
{
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult);
return false;
}
function loadCalendarApi() {
gapi.client.load('calendar', 'v3', makeApiCall);
}`
2)
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
requestList = gapi.client.calendar.events.list({
'calendarId': calendarId
});
console.log('--- eventsList ---');
console.log(eventsList);
uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEventSource', eventsList);
eventsList = [];
// Step 6: Execute the API request
requestList
.then(function (resp) {
if (resp.result.error) {
reportError('Google Calendar API: ' + data.error.message, data.error.errors);
} else if (resp.result.items) {
resp.result.items.forEach(function (entry, index) {
eventsList.push({
id: entry.id,
title: entry.summary,
start: entry.start.dateTime || entry.start.date, // try timed. will fall back to all-day
end: entry.end.dateTime || entry.end.date, // same
url: url,
location: entry.location,
description: entry.description
});
});
}
if (eventsList.length > 0) {
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', eventsList, true);
}
}, function (reason) {
console.log('Error: ' + reason.result.error.message);
});
}`
3)
//insert into calendar
function makeRpcRequest(eventData) {
gapi
.client
.load('calendar', 'v3')
.then(function () {
request = gapi.client.calendar.events.insert({
'calendarId': calendarId,
'resource': eventData
});
request.then(function (resp) {
if (resp.result.error) {
reportError('Google Calendar API: ' + data.error.message, data.error.errors);
} else {
makeApiCall();
console.log(resp);
var creator = resp.result.creator.email;
var calendarEntry = resp.result.htmlLink;
console.log('--- Calendar entry successfully created by---');
console.log(creator);
console.log('--- dd ---');
console.log(calendarEntry);
}
}, function (reason) {
console.log('Error: ' + reason.result.error.message);
});
});
}`