I/m working with AngularUI calendar.My task is add some data to Calendar cells with CSS Styles.
I haven't any idea about that,beacause I'm new to AngularJS.
Please help me.
Thanks.
My Angular Code
$scope.uiConfig = {
calendar: {
height: 500,
editable: true,
header: {
left: '',
center: 'title',
right: 'prev next'
},
defaultView: 'month'
}
};
Try this kind of effort with dayRender function. You can add html elements to your calendar using cell.html
With my answer all cells fill with same styles and other HTML Elements.Then you can customize it with your back-end array.
Try this
$scope.uiConfig = {
calendar: {
height: 500,
editable: true,
header: {
left: '',
center: 'title',
right: 'prev next'
},
defaultView: 'month',
dayRender: function (date, cell) {
$r = $scope.getDateInfo(date);
if($r){
cell.css("background-color", "#e6f7ff");
}
cell.html('<b>'+$r.amount+'</b>');
}
}
};
$scope.getDateInfo = function(date){
return {
amount : 50000
}
}
You can add in-line styles or classes to HTML elements.
In this I used another function.Please refer my code and any further matter simply leave a comment.
fiddle
Cheers!!
Related
How to fix the column on the screen during the scroll? Using the Mui-datatables library, like datatables on doc. doc
In the mui-datatables there is a fixedSelectColumn property, but I was unable to select the column or configure the scroll.
My options :
const options = {
filter: true,
filterType: 'multiselect',
textLabels : TextLabels,
responsive: 'scroll',
fixedHeader: true,
tableBodyHeight: '100%',
selectableRows: false,
fixedSelectColumn: true,
};
The fixedSelectColumn prop is for the "selection" elements, i.e., the check boxes. I don't think the MUI-Datatables, as of this writing has props like this feature that you have linked pertaining to the jQuery datatables.
However, upon looking at this source code, we can see that some of the "fixed" columns utilize the CSS position: sticky property. So, one way to implement fixed columns is to style the cells & header cells as such:
const columns = [
{
name: "Name",
options: {
filter: true,
setCellProps: () => ({
style: {
whiteSpace: "nowrap",
position: "sticky",
left: "0",
background: "white",
zIndex: 100
}
}),
setCellHeaderProps: () => ({
style: {
whiteSpace: "nowrap",
position: "sticky",
left: 0,
background: "white",
zIndex: 101
}
})
}
},
...
I am using Angular JS and FullCalendar control for one of my requirement.
My code for full calendar in Angular JS is as below:-
<div ui-calendar="uiConfig.calendar" ng-model="eventSources" id="calendar"></div>
$scope.uiConfig = {
calendar: {
editable: true,
header: {
left: 'title',
center: '',
//right: 'today prev,next'
right: 'today next'
},
aspectRatio: 1.25,
selectable: true,
events: $scope.eventsselection,
dayClick: $scope.dayClick,
validRange: function (nowDate) {
return {
start: nowDate.clone().subtract(1, 'days'),
};
}
}
};
I want to add my custom business logic when user clicks on "today" button at top right. How to achieve this?
You can define a customButton with the text 'Today'
customButtons: {
myTodayButton: {
text: 'Today',
click: function() {
/* Add custom logic here */
$('#calendar').fullCalendar('today'); //will change calendar to today
}
}
},
In order to be able to see this button you must add it to the header option instead of the today option
header: {
left: 'title',
center: '',
right: 'myTodayButton next'
},
I am using angular ui calendar to render events, when the page loads application is rendering the calendar properly.
But when I refresh the screen, events block is not rendering.
I am using the following code to render the calendar in UI.
Following is my code block.
function returnCalendarConfig() {
return {
calendar: {
height: 500,
editable: false,
displayEventTime: true,
selectable: true,
timeFormat: 'hh:mm A',
stick: true,
defaultView: 'month',
columnFormat: 'dddd',
disableDragging: false,
header: { left: 'month,agendaWeek,agendaDay', center: 'title', right: 'prev,next' },
eventClick: $scope.onEventClick,
dayClick: $scope.onDayClick,
eventRender: $scope.onEventRender
}
};
}
$scope.uiConfig = returnCalendarConfig();
function getCalendarEvents() {
var user = commonService.getUser();
console.log('User Object', user);
$scope.events = [];
$timeout(function () {
applyScope();
});
commonService.hideProcessingForSiteDetails(200);
}
getCalendarEvents()
getCalendarEvents method calls at end of the controller.
<div class="calendar" data-ng-model="eventSources" calendar="myCalendar" ui-calendar="uiConfig.calendar">
</div>
How can I customize full calendar Particular day's color. (For Example, I want to set red as background color for all Friday in a month)
You can try this:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
},
defaultView: 'month',
dayRender: function ( date, cell) {
if (moment(date).weekday() == 5) {
cell.css("background-color", "red");
}
},
});
});
https://jsfiddle.net/wke7w839/
I'm trying to implement the loading callback function using the angular-ui calendar. I want my calendar to go to a specific date once it is loaded instead of going to the current date.
I can get this functionality using the dayClick method, however I have not been able to implement the loading function using angular at all. Below is the code, note that the loading callback is not console logging anything.
$scope.goToRootScopeDate = function() {
$scope.myCalendar.fullCalendar('gotoDate', $rootScope.day);
}
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: function(bool) {
if (bool) {
console.log('Done loading')
} else {
console.log("still loading")
}
}
},
};
If you want to manage the Loading callback method from the ng-controller...
Loading callback receives two parameters, not a boolean.
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: $scope.loading
},
};
And then you manage it in the controller with those 2 parameters
$scope.loading = function(isLoading, view){
alert("is loading" + isLoading);
}
You can reproduce it at this plunker where I added some annoying alerts to manage the loading callback.
But, if you only want to load a specific date at the first screen...
Just set the defaultdate in the config:
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
defaultDate:$scope.myDesiredDate
},
};