We Keep Coding

Pass another parameter to Fulcalendar

Here is the code, the "events: url," part of the code is coming through into my fullcalendar.js file and adds the events however I also want to add a list of users from json data like so users:'urlusers'
Will I have to edit the fullcalendar.js file and if so where can I add another parameter for the users.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
minTime: "08:00:00",
maxTime: "20:00:00",
editable:false,
header:{
left:'prev,next today',
center:'title',
},
events: 'https://events.com/eventsjson',
users:'https://events.com/usersjson',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var titlestart = $.fullCalendar.formatDate(start, "DD-MM-Y HH:mm:ss");
var r = confirm("Request Time " + titlestart);
if (r == true) {
event.preventDefault();
//Open dialog
var subject = 'Booking '+titlestart;
var emailBody = 'Create booking for '+titlestart
showDialog(titlestart);
} else {
}
},
});
});

Not the solution I was thinking of but got the result.
on the events: 'https://events.com/eventsjson', I needed to add more data to the JSON then the fullcalendar sorted the rest out for me
foreach($result as $row)
{
$data[] = array(
'id' => $row["user_id"],
'start' => $row["startevent"],
'end' => $row["endevent"],
'backgroundColor' => $row["backgroundColor"],
'borderColor' => $row["borderColor"]
);
}

FullCalendar not showing extraParams

I am having some problems retrieving these from my string
here is my script, taken from the website..
events: {
url: '/CalendarManager/Findall',
method: 'GET',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
},
failure: function () {
alert('there was an error while fetching events!');
},
eventRender: function (event, element) {
element.qtip({
content: event.custom_param1,
content: event.custom_param2
});
}
},
UPDATE: 12/24/2020
To answer questions below.. I am using 5.3.2 version. I can use this as well and it will bring back everything but the custom parameters.
events: '/CalendarManager/Findall',
I am using Json pulling from DB - Below is the code..
public ActionResult FindAll()
{
return Json(db.GetEvents.AsEnumerable().Select(e => new
{
id = e.CompanyId,
companyName = e.CompanyName,
title = e.Title,
description = e.Description,
allDay = e.AllDay,
start = e.StartDate.ToString("yyyy-MM-ddTHH:mm:ss"),
end = e.EndDate.ToString("yyyy-MM-ddTHH:mm:ss"),
color = e.Color
}).ToList(), JsonRequestBehavior.AllowGet);
}
I changed the version I was using and that is when the extras did not show up. So I added what I thought the documentation said to use.
Adding the extra Params after the url did not work..
UPDATE:
I read through the suggested. I guess I am still not understanding or maybe not getting "Where I am supposed to put the code".
I believe I need to use eventContent. I also did use the console.log(info.event.extendedProps.companyName); Which is great, it does show up in the console window, However i need it on the calendar not in the console window. FullCalendar's examples could be a little better!
Here is what I did but still does not show on the calendar.
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
eventSources: [{
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
}],
eventContent: function (arg) {
html: arg.event.extendedProps.companyName
}
I did add some stuff in there to produce just a bubble when hovered over with this info but it does not work either.
Thank You!
UPDATE: 12/27/2020 Working Code
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay,listWeek'
},
initialView: 'dayGridMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
themeSystem: 'bootstrap',
selectable: true,
selectMirror: true,
//Random default events
//events: '/CalendarManager/Findall',
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
events: {
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
},
eventContent: function (arg) {
return { html: arg.event.title + '<br>' + arg.event.extendedProps.companyName + '<br>' + arg.event.extendedProps.description };
}
});
calendar.render();
Thank you for all your help!

First, let me know what kind of version of fullcalendar you are using.
fullcalendar v5.5 doesn't provide eventRender.
And extraParams is not what you want to show. It is the query params which attach after the request url, like http://example.com/CalendarManager/Findall?custom_param1=customerName&....
If you want to use extend event props then you should parse them as extendProps.
And you should use Event Render Hooks rather than eventRender if you are using the latest version.
How to fix:
Anyway, you should use function, not an object.
You can use events (as a function)
function( fetchInfo, successCallback, failureCallback ) { }
You can also use events (as a json feed)
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
If you are going to use object rather than function, then you can use eventSources
And if you want to handle the success response, then use eventSourceSuccess function
Here is an example (using fullcalendar v5.5):
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listWeek',
loading: function(bool) {
if (bool) {
$("#dashboard-calendar-column .pre-loader").show();
} else {
$("#dashboard-calendar-column .pre-loader").hide();
}
},
// get all events from the source
eventSources: [{
url: '/CalendarManager/Findall',
method: 'GET',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
}],
// convert the response to the fullcalendar events
eventSourceSuccess: function(content, xhr) {
var events = [];
content.events.value.map(event => {
events.push({
id: event.id,
allDay: event.isAllDay,
title: event.subject,
start:event.start.dateTime,
end: event.end.dateTime,
// The followings are what you want to add as extended
custom_param1: 'customerName',
custom_param2: 'description',
// Or you could add them to the extendedProps object
extendedProps: {
custom_param1: 'customerName',
custom_param2: 'description',
description: event.bodyPreview,
...
},
// You can check fullcalendar event parsing
...
})
})
return events;
},
eventDidMount: function (arg) {
// remove dot between the event titles
$(arg.el).find('.fc-list-event-graphic').remove();
// You can select the extended props like arg.event.custom_param1 or arg.event.extendProps.custom_param1
...
},
});
calendar.render();
})
Hope this would help you.

You can use extraParams using eventSources if you are using fullcalendar v5.
eventSources: [{
url: '/CalendarManager/Findall',
method: 'POST',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
}
...
}]
You should use POST rather use GET, then it will work.

show event in fullcalendar with json.parse (SyntaxError: missing : after property id)

Show events in the calendar after the loading screen.
events: {
JSON.parse(get_data());
},
CONTROLLER all is ok no problem here expept for the JSON.PARSE
$calendar = array();
foreach($data_calendar as $key => $val) {
$calendar[] = array(
'id' => intval($val - > id),
'title' => $val - > title,
'description' => trim($val - > description),
'start' => date_format(date_create($val - > start_date), "Y-m-d H:i:s"),
'end' => date_format(date_create($val - > end_date), "Y-m-d H:i:s"),
'color' => $val - > color,
);
}
$data = array();
$data['get_data'] = json_encode($calendar);
$data['telaativa'] = 'agenda'; //retorna agenda penso que manté menu barra esquerda colapsada em agenda
$data['tela'] = ('/calendario/view_agenda--');
view_agenda--
$this - > load - > view('view_home2', $data);
RESULT id with 1 or "1" in the result is because i declare intval for id so i can get both formats in output.
'get_data' => string '[{"id":1,
'get_data' => string '[{"id":"1",
array (size=3)
'get_data' => string '[{"id":1,"title":"teste evento1","description":"descri\u00e7\u00e3o do evento bla bla bla","start":"2019-05-06 00:00:00","end":"2019-05-07 00:00:00","color":"#0071c5"},{"id":6,"title":"cert soldador 1-1","description":"descrtivo do certificado ser 111 bw t1-25mm s275","start":"2019-05-29 23:00:00","end":"2019-05-30 00:00:00","color":"#40E0D0"},{"id":7,"title":"cert soldador 1-2 soldador nr1","description":"certificado de soldador nr 1 doc 1-2","start":"2019-05-30 00:00:00","end":"2019-05-31 00:00:00","color'... (length=5865)
'telaativa' => string 'agenda' (length=6)
'tela' => string '/calendario/view_agenda--' (length=25)
VIEW
$(document).ready(function() {
$('.date-picker').datepicker();
$('#calendarIO').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: moment().format('YYYY-MM-DD'),
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
$('#create_modal input[name=start_date]').val(moment(start).format('YYYY-MM-DD'));
$('#create_modal input[name=end_date]').val(moment(end).format('YYYY-MM-DD'));
$('#create_modal').modal('show');
save();
$('#calendarIO').fullCalendar('unselect');
},
eventDrop: function(event, delta, revertFunc) { // si changement de position
editDropResize(event);
},
eventResize: function(event, dayDelta, minuteDelta, revertFunc) { // si changement de longueur
editDropResize(event);
},
eventClick: function(event, element) {
deteil(event);
editData(event);
deleteData(event);
},
events: {
JSON.parse(get_data());
},
});
});
ERROR
SyntaxError: missing : after property id
If i delete JSON.parse(get_data()); my calendar will be visible but no events. If I add an event it will be shown until I refresh the page. All function work expect loading data from DB into the calendar.

You seem to be confused about how to use your PHP view data in your view.
I think maybe you should read this: https://www.codeigniter.com/user_guide/general/views.html#adding-dynamic-data-to-the-view . It shows you how to inject the PHP data you provided to the view into your page.
What you're doing now is writing pure JavaScript which tries to call a function which doesn't exist. What you need to do is write a PHP snippet to inject the server-side data into the HTML and JavaScript code which the PHP is creating.
I'm not a CodeIgniter expert, but based on that documentation page, what I think you should be writing is:
events: <?php echo $get_data; ?>,
If you inject it like this without quote marks, then it will be automatically treated as JavaScript array literal, so there's no need for JSON.parse(). This works because JSON syntax is a subset of valid JavaScript object syntax. If you use the View Source feature in your browser to view the finished output of your page, you'll see what I mean.
(Note that you also need to remove the { and } from the events: declaration, because fullCalendar expects an array, not an object.

TinyMCE Dynamic Buttons/Methods

I'm attempting to create a Wordpress plugin which allows you to easily add a dropdown menu with items in for inserting shortcodes. To do this, I need to 'hook' into TinyMCE, registering a custom plugin. My plan is to allow users to setup the shortcode menu items using a simple PHP array.
The following class is instantiated which registers a new button and the plugin script:
<?php
namespace PaperMoon\ShortcodeButtons;
defined('ABSPATH') or die('Access Denied');
class TinyMce {
public function __construct()
{
$this->add_actions();
$this->add_filters();
}
private function add_actions()
{
add_action('admin_head', [$this, 'print_config']);
}
public function print_config()
{
$shortcodes_config = include PMSB_PLUGIN_PATH . 'lib/shortcodes-config.php'; ?>
<script type='text/javascript' id="test">
var pmsb = {
'config': <?php echo json_encode($shortcodes_config); ?>
};
</script> <?php
}
private function add_filters()
{
add_filter('mce_buttons', [$this, 'register_buttons']);
add_filter('mce_external_plugins', [$this, 'register_plugins']);
}
public function register_buttons($buttons)
{
array_push($buttons, 'shortcodebuttons');
return $buttons;
}
public function register_plugins($plugin_array)
{
$plugin_array['shortcodebuttons'] = PMSB_PLUGIN_URL . 'assets/js/tinymce.shortcodebuttons.js';
return $plugin_array;
}
}
A user would create a PHP array like so (which is included in the above class and output as a javascript variable in the header):
<?php
return [
[
'title' => 'Test Shortcode',
'slug' => 'text_shortcode',
'fields' => [
'type' => 'text',
'name' => 'textboxName',
'label' => 'Text',
'value' => '30'
]
],
[
'title' => 'Test Shortcode2',
'slug' => 'text_shortcode2',
'fields' => [
'type' => 'text',
'name' => 'textboxName2',
'label' => 'Text2',
'value' => '30'
]
]
];
Finally, here's the actual plugin script:
"use strict";
(function() {
tinymce.PluginManager.add('shortcodebuttons', function(editor, url) {
var menu = [];
var open_dialog = function(i)
{
console.log(pmsb.config[i]);
editor.windowManager.open({
title: pmsb.config[i].title,
body: pmsb.config[i].fields,
onsubmit: function(e) {
editor.insertContent('[' + pmsb.config[i].slug + ' textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
}
});
}
for(let i = 0; i <= pmsb.config.length - 1; i++) {
menu[i] = {
text: pmsb.config[i].title,
onclick: function() {
open_dialog(i)
}
}
}
console.log(menu);
editor.addButton('shortcodebuttons', {
text: 'Shortcodes',
icon: false,
type: 'menubutton',
menu: menu
});
});
})();
The button registers fine, the menu items also register fine but when it comes to click on to open up a modal window, I get this error:
Uncaught Error: Could not find control by type: text
I think it's something to do with the fact that the 'fields' is coming from a function which, for some reason, TinyMCE doesn't like - even though it's built correctly.
I had thought of doing this a different way - by creating a PHP file which outputs the correct JS but if I do that, I can't register it as a TinyMCE plugin when using the mce_external_plugins action hook.
I found another question which ran in to the same problem with no answer.
I've really hit a wall with this one, any help would be hugely appreciated!

Well, the typical thing happened - as soon as I post the question, I stumble upon the answer. Maybe I need to get myself a rubber desk duck?
Anyway, the clue is in the error message. Despite having looked at quite a number of tutorials which all suggest using 'text' as the control type, it's actually 'textbox'. I'm guessing this is a more recent change in TinyMCE and the tutorials I was looking at were a bit older.
I searched for yet another tutorial and found the answer staring me right in the face.

Get selected row in Gridview yii2 selectioncolumn undefined error

i am getting error while selecting the rows and sending keys to controller.
In firebug on the button click event it displays error something like this
Uncaught TypeError: Cannot read property 'selectionColumn' of undefined
Here is my view code. its simple gridview
<?= Button::widget([
'label' => 'Message',
'options' => ['class' => 'btn-danger','id' => 'message'],
]);
?>
</p>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showOnEmpty'=>true,
'columns' => [
['class' => 'yii\grid\CheckboxColumn'],
[
'attribute' => 'event_id',
'label' => 'Event Title',
'value' => 'event.title'
],
[
'attribute' => 'fullName',
'label' => 'Name',
'value' => 'users.fullname',
],
],
]);
?>
And here is the script i am using for onclick event
$script = '
jQuery(document).ready(function() {
btnCheck = $("#message");
btnCheck.click(function() {
var keys = $("#w1").yiiGridView("getSelectedRows");
alert(keys);
$.ajax({
type: "POST",
url: "'.\yii\helpers\Url::to(['/checkin/message']).'",
dataType: "json",
data: {keylist: keys}
});
});
});';
$this->registerJs($script, \yii\web\View::POS_END);
Which doesnt seems to work somehow on the button onclick event only instead of that if i use this script it works fine
$this->registerJs('
$(document).ready(function(){
$("#w1 input[type=checkbox]").click(function(){
var keys = $("#w1").yiiGridView("getSelectedRows");
$.ajax({
type:"POST",
url: "../message", // your controller action
dataType: "json",
data: {keylist: keys},
success: alert(keys)
});
});
});
Which is almost same but in the second script the ajax request is sent every time i click on the checkbox.
I want users to select the rows first and do action on the button click event
Hope you understand
I know its very common error but i tried different options and none of it seems to work
thank you.......

When you see an error message, the first thing you should check the line it is occurring at. There you will find the most important information. In our case, this is the line of code where the problem was:
var keys=$("#w1").yiiGridView("getSelectedRows");
Here, your code searched for an element having the id of w1 and called yiiGridView for that. Somewhere inside the function a selectioncolumn was referred, but the element whose member with that name was referred was not initialized properly.