How to the pass specific day from cakephp controller to Fullcalendar integrated view file - cakephp

I want to pass the specific day value to that specific month day on fullcalendar interface, so that day(not date only specific day like 'Wednesday') should be color red on calendar. Can anyone help me on this?
public function appointmentCalendar($chamberId=null){
$this->loadModel('ScheduleChember');
$chamberInformation= $this->ScheduleChember->get($chamberId);
$providerId = $this->Auth->user(['id']);
$doctorOffDay = $this->AppointmentScheduleChamberSlots->find('all')->where(['provider_id' =>$providerId, 'schedule_chember_id'=> $chamberId, 'off_day' => 1])->select(['day_name'])->toArray();
$this->set(compact('chamberInformation', 'doctorOffDay'));
}
<h1><?php echo $chamberInformation->name; ?></h1>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#6.1.1/index.global.min.js'>
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var someVariable = <?= json_encode($doctorOffDay) ?>;
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'red',
headerToolbar: {
start: 'prev',
center: 'title',
end: 'next'
},
events: [
{
title: 'Off Day',
start: '2023-02-08'
},
]
});
calendar.render();
});

Related

embed code twitter on Tinymce 4

I am adding a plugin which insert twitter embed code. the problem is that I can see the tweet on the editor but not in the source code and preview. And I can't save it. I saw in forum that I have to add 'http:' to '//platform.twitter.com/widgets.js' and put it before , unfortunately, it's not working. This is the code I put:
tinymce.PluginManager.add('twitter', function(editor, url) {
editor.on('init', function (args) {
editor_id = args.target.id;
});
editor.addButton('twitter', {
text: 'Twitter',
icon: false,
onclick: function () {
editor.windowManager.open({
title: 'Twitter Embed',
body: [
{ type: 'textbox',
size: 40,
height: '100px',
name: 'twitter',
label: 'twitter'
}
],
onsubmit: function(e) {
var embedCode = e.data.twitter;
var script = embedCode.match(/<script.*<\/script>/)[0];
var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
console.log(script);
var sc = document.createElement("script");
sc.setAttribute("src", "https:"+scriptSrc);
sc.setAttribute("type", "text/javascript");
var iframe = document.getElementById(editor_id + "_ifr");
var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
var iframeBody = iframe.contentWindow.document.getElementsByTagName('body')[0];
embedCode1 = embedCode.replace('//platform.twitter.com/widgets.js','https://platform.twitter.com/widgets.js');
iframeBody.appendChild(sc);
editor.insertContent(embedCode1);
iframeHead.appendChild(sc);
// setTimeout(function() {
// iframe.contentWindow.twttr.widgets.load();
// }, 1000)
}
});
}
});
});

Regarding displaying ui-calendar events

Hello all i am designing a leave management website with angularjs and ui-calendar.If a user takes a leave ,the values are taken from the database and displayed as an event in the calendar.Now what i want to do is ,if the user is not absent on particular day,it should be displayed as present event.Hope the following image helps understanding better.
Now vikki is taking leave on friday.I want to mark other dates as an event displaying in different color saying he s present.I need this to be in the week view.Please let me know if there is any way to do this thing.Following is my code
app.factory('calendarSer', ['$http','$rootScope', 'uiCalendarConfig', function ($http,$rootScope, uiCalendarConfig) {
return {
displayCalendar: function($scope) {
$calendar = $('[ui-calendar]');
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$scope.changeView = function(view) {
$calendar.fullCalendar('changeView', view);
};
/* config object */
$scope.uiConfig = {
calendar: {
lang: 'da',
height: 450,
editable: true,
selectable: true,
header: {
left: 'month basicWeek basicDay',
center: 'title',
right: 'today prev,next'
},
eventClick: function(date, jsEvent, view) {
$scope.alertMessage = (date.title + ' was clicked ');
alert("clicked" + date.title);
},
select: function(start, end, allDay) {
var obj = {};
obj.startAt = start.toDate();
obj.startAt = new Date(obj.startAt).toUTCString();
obj.startAt = obj.startAt.split(' ').slice(0, 4).join(' ');
obj.endAt = end.toDate();
obj.endAt = new Date(obj.endAt).toUTCString();
obj.endAt = obj.endAt.split(' ').slice(0, 4).join(' ');
$rootScope.selectionDate = obj;
$("#modal1").openModal();
calendar.fullCalendar('unselect');
},
eventRender: $scope.eventRender
}
};
$scope.events = [];
$scope.eventSources = [$scope.events];
$http.get("rest/leave/list", {
cache: true,
params: {}
}).then(function(data) {
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function(value) {
console.log(value.title);
$scope.events.push({
title: value.title,
description: value.description,
start: value.startAt,
end: value.endAt,
allDay: value.isFull,
stick: true
});
});
});
}
}
}]);
Thanking you
You need to also create the events array which would display the user is present. However, if you try to create the array in the front-end, then you would not know the other user information to fill the calendar.
"rest/leave/list" : will return that vikki is on leave, however what if the other user that has not taken any leave and is not returned in this array? how will you be able to fill the calendar saying user is present all the other days?
$scope.events.push({
title: value.title,
description: value.description,
start: value.startAt,
end: value.endAt,
allDay: value.isFull,
stick: true
});
$scope.eventSources = [$scope.events];
You are filling the events and binding it to the eventSources.
So you need to return something like below from the reponse "rest/leave/list":
{
title: "vikki",
description: "description",
startAt: "2017-05-05 00:00",
endAt: "2017-05-05 23:59",
isFull: true,
leave: true <- This will say he is absent
},
{
title: "vikki",
description: "description",
//The start and end date time will control the block that will be booked in the calendar
startAt: "2017-06-05 00:00",
endAt: "2017-01-06 23:59",
isFull: true,
leave: false <- This will say he is present
//This array will book the calendar from May-06 to end of the month.
//If you want the past, then create one in the past and send it from
//server
}
In the above array, you need to create separate rows for absent and present. For example , 1st row consist of January month where the user has not taken any leaves, so you create a row with Start date Jan 01 and End date Jan 30, In Feb, the user has taken one leave on say 5th. So you create three rows, row 1 with Feb 01 to Feb 04 as present, row 2 with Feb 05 as absent, and row 3 with Feb 06 - Feb 31 as present
Using the variable "leave" from the array, in the frontend you can change the colour. You can refer it from this how to achieve it.
Jquery Full calendar and dynamic event colors

Marker Clusterer in DevExtreme Mobile

I'm developing an application in DevExtreme Mobile. In application, I use DXMap in this application. How can I use the marker clusterer structure in DevExtreme Mobile App?
You can use Google Maps Marker Clusterer API to create and manage per-zoom-level clusters for a large number of DevExtreme dxMap markers. Here is an example:
 dxMap Marker Clusterer
This example is based on the approach described in the Google Too Many Markers! article
Here is sample code:
$("#dxMap").dxMap({
zoom: 3,
width: "100%",
height: 800,
onReady: function (s) {
var map = s.originalMap;
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
});
The kry is to use the google maps api. I did it for my app, here how.
This the html, very simple:
<div data-options="dxView : { name: 'map', title: 'Punti vendita', pane: 'master', secure:true } ">
<div data-bind="dxCommand: { id: 'back', behavior: 'back', type: 'back', visible: false }"></div>
<div data-options="dxContent : { targetPlaceholder: 'content' } ">
<div style="width: 100%; height: 100%;">
<div data-bind="dxMap:options"></div> <!--this for the map-->
<div id="large-indicator" data-bind="dxLoadIndicator: {height: 60,width: 60}" style="display:inline;z-index:99;" />
<div data-bind="dxPopover: {
width: 200,
height: 'auto',
visible: visible,
}">
</div>
</div>
</div>
</div>
When the page loads, the app read the gps coordinates:
function handleViewShown() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
jQuery("#large-indicator").css("display", "none"); //this is just a gif to indicate the user to wait the end of the operation
}
If the gps location is correctly read, I save the coordinates (the center of the map):
function onSuccess(position) {
var lat1 = position.coords.latitude;
var lon1 = position.coords.longitude;
center([lat1, lon1]);
}
And these are the options I set to my dxMap:
options: {
showControls: true,
key: { google: "myGoogleApiKey" },
center: center,
width: "100%",
height: "100%",
zoom: zoom,
provider: "google",
mapType: "satellite",
autoAdjust: false,
onReady: function (s) {
LoadPoints();
var map = s.originalMap;
var markers = [];
for (var i = 0; i < MyPoints().length; i++) {
var data = MyPoints()[i];
var latLng = new google.maps.LatLng(data.location[0], data.location[1]);
var marker = createMarker(latLng, data.title, map, data.idimp);
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'images/m' });
}
},
Where MyPoints is populated calling LoadPoints:
function LoadPoints() {
$.ajax({
type: "POST",
async:false,
contentType: "application/json",
dataType: "json",
url: myApiUrl,
success: function (Response) {
var tempArray = [];
for (var point in Response) {
var location = [Response[p]["latitudine"], Response[p]["longitudine"]];
var title = Response[p]["name"] + " - " + Response[p]["city"];
var temp = { title: title, location: location, tooltip: title, onClick: GoToNavigator, idpoint: Response[p]["id"] };
tempArray.push(temp);
}
MyPoints(tempArray);
},
error: function (Response) {
jQuery("#large-indicator").css("display", "none");
var mex = Response["responseText"];
DevExpress.ui.notify(mex, "error");
}
});
}
Note that in the folder Myproject.Mobile/images I included the images m1.png, m2.png, m3.png, m4.png and m5.png.
You can found them here.

KendoGrid/Angular: cannot create grid columns/data dynamically

In this plunk I have an empty grid (without columns). When I click on "Build Grid" I need to add columns (taken from an array) and also add a row to the table.
The problem is that the columns are not added to the grid, any ideas? If I try to refresh the grid, I get an undefined error.
HTML:
<button ng-click="buildGrid()">Build Grid</button>
<div kendo-grid="grid" k-options="gridOptions" k-data-source="ds"></div>
Javascript:
var app = angular.module("app", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.ds = []
$scope.colsList = [{ name: "col1" },
{ name: "col2" },
{ name: "col3" },
{ name: "col4" }];
var gridCols = [];
$scope.gridOptions = {
columns: gridCols
};
$scope.buildGrid = function() {
$scope.data = {};
for (var x=0;x<$scope.colsList.length;x++) {
var col = {};
col.field = $scope.colsList[x].name;
col.title = $scope.colsList[x].name;
$scope.data[col.field] = "" + (1111 * (x+1));
gridCols.push(col);
}
// add one row to the table
$scope.ds.push($scope.data);
//$scope.grid.refresh();
};
}
You need to use k-rebind so that the grid reinitializes (you can't set the columns dynamically on an existing grid):
<div kendo-grid="grid"
k-options="gridOptions"
k-data-source="ds"
k-rebind="gridOptions"></div>
(demo)

save() not working in ext4yii ExtFormController

i tried to insert data using ext4yii form. But the save function in not working. plz look through my code
code of formpanel
<ext:Window ClassName="WelcomeWindow" width="500" iconCls="IconApplication"
bodyPadding="25" bodyStyle="background-color:#fff" layout="fit"
title="<?php echo Yii::app()->name;?>" closable="false"
maximizable="false">
<prop:Items>
<ext:FormPanel itemId="form1" width="300" title="myform" autoScroll="true">
<prop:Form>
<ext:CRUDForm controller="ContactForm" />
</prop:Form>
<prop:DockedItems>
<?php
include 'ContactView_Editor_Toolbar.php';
?>
</prop:DockedItems>
<prop:Items>
<ext:TextField name="Name" fieldLabel="Name"/>
<ext:TextField name="address" fieldLabel="Address"/>
</prop:Items>
<prop:InstanceBody>
<script>
(function(){
return {
StartSaveContact:function()
{
var me = this;
me.mode='new_contact';
var msg = me.mode == 'new_contact' ? 'New contact created successfully.' : 'Contact saved successfully.';
var form = me.getForm();
if(form.isValid()) {
var lm = Ext4Yii.newLoadMask(me,'Please wait...',true);
form.submit({
params:{
mode:me.mode
},
success:function(form,response) {
lm.hide();
Ext.MessageBox.show({
title: me.title,
msg: msg,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO,
fn:function() {
}
});
},
failure:function(form,response) {
lm.hide();
Ext.MessageBox.show({
title: me.title,
msg: response.result.message,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR,
fn:function() {
}
});
}
});
}
}
}
})()
</script>
</prop:InstanceBody>
</ext:FormPanel>
</prop:Items>
</ext:Window>
code of contactformcontroller
class ContactFormController extends ExtFormController
{
public function load($request) {
}
public function save($data)
{
$customer = new Employee();
/**
* We can use the setAttributes method on the Customer model
* since the form names have the same name as the attributes.
*/
$customer->setAttributes($data);
if( $customer->save())
$this->exportData($customer);
else
$this->exportException("Don't know what to do..");
}
}
the failure function is trigering without showing any message.
Thanks for advance
If you look with firebug , then what kind of error do you get?

Resources