FullCalendar Title with Capital letters - view

I would like to know how to put capital to the view title, as for instance, I get this:
septiembre / 2015
23 / septiembre / 2015
My view config for the title is:
views: {
month: {
titleFormat: 'MMMM YYYY'
},
day: {
titleFormat: 'DD / MMMM / YYYY'
}
},
Hope there is a solution ! :D Cheers !

You can edit your CSS and add the following:
.fc-toolbar {
text-transform: uppercase;
}
It will set the title text of the calendar in capital letters.

Related

How can I choose the minimum range for each month with daterangepicker?

Using this http://www.daterangepicker.com/
How can I choose the minimum selection for each month? For example I'm using this code;
$('.date-picker input').daterangepicker({
"minSpan": {
"days": 5
},
showDropdowns: true,
locale: {
format: 'DD/MM/YYYY'
}
});
I want this code like this;
$('.date-picker input').daterangepicker({
if(this.month==5){
"minSpan": {
"days": 5
},
}
showDropdowns: true,
locale: {
format: 'DD/MM/YYYY'
}
});
The pull request fixing this was not implemented yet, so you will have to change the source file by yourself. Install Date Range Picker via npm
bootstrap-daterangepicker
Link the js-file in your html (if you are working with html)
<script type="text/javascript" src="node_modules/bootstrap-daterangepicker/daterangepicker.js"></script>
Go to the daterangepicker.js file and add the missing code:
https://github.com/dangrossman/daterangepicker/pull/2173/files
Then your js code must work
$('.date-picker input').daterangepicker({
"minSpan": {
"days": 5
},

"Date has wrong format" Angular 10 Rest Django

Hi I'm new to these two frameworks and I need your help !
So I'm using Rest Django for backend and Angular for Frontent , I'm also using Angular material for the DatePicker , although I changed the format of the date to YYYY-MM-DD to the DatePicker I still receive an error message "Date has wrong format. Use one of these formats instead: YYYY-MM-DD." by the server when sending the api !
to change the date format in Angular I used this code into app.module
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '#angular/material/core';
import { MomentDateModule, MomentDateAdapter } from '#angular/material-moment-adapter';
export const DateFormats = {
parse: {
dateInput: ['YYYY-MM-DD']
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MM YYYY',
},
};
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: DateFormats }
],
After console.log('date',this.date) to see the date object entered by the datepicker I received
date
{…}
​
_d: Date Tue Aug 18 2020 00:00:00 GMT+0100 (UTC+01:00)
​
_i: Object { year: 2020, month: 7, date: 18 }
​
_isAMomentObject: true
​
_isUTC: false
​
_isValid: true
​
_locale: Object { _calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", … }
​
_pf: Object { empty: false, overflow: -1, charsLeftOver: 0, … }
​
<prototype>: Object { add: createAdder(val, period), calendar: calendar$1(time, formats), clone: clone(), … }
Do you know how can I solve the problem please ?
u should create a method to trim ur date removing the timezone & other inform then call the method in ur date input field
something like this
yourDateApp.component.ts file
trimDate(myDate){
let strDate = JSON.stringfy(myDate.value)
let newDate = strDate.substring(1, 11)
//assign the new trimmed date to date value in ur form
yourForm.controls['date_field'].setValue(newDate)
}
yourDateApp.component.html file
//call your function in the html file like this
<input matInput (dateChange)="trimDate($event)">
this will accept the date trim it to a way django will recognize it

Adding a bimonthly view in KendoUI Scheduler

How do I add a 15 day (bimonthly) view in Kendo UI Scheduler?
The idea is to show 15 days at a time (as opposed to 30 days in a month).
Any help is greatly appreciated.
This can be done using custom timeline view ,
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
**numberOfDays: 15**
},
and then the view type will be "MyCustomTimelistView"
var scheduler = $("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [{
type: "**MyCustomTimelistView**",
selected: true,
dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span>"
}],
Reference: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/timeline-with-dynamic-length

How to display the date with second and minutes in tooltip

I have a doubt in Kendo chart tool tip .That is how to display the date with time format .I have a field time: `2013-02-13 16:58:07`,
some thing like this so when i am reading in tool tip template i am
calling the field as
tooltip: {
visible: true,
template: '#= category # ,
font: '11px Trebuchet MS'
}
In tool tip it was showing as fri feb 01 2013 00:00:00 gmt+0530(indian standard time)**
How can I change that and display only 2013-02-13 16:58:07 using remote data
I used dataitem in local data it was working fine but with remote data i am getting as undefined.
tooltip: {
visible: true,
format: "{0}",
template: 'DATE:#= dataItem.time<br/>'
}
The problem is the timeformat,this is from ww3c:
var d=new Date();
var n=d.toISOString();
And this is the result:
2013-02-28T07:41:04.188Z
Also try to read this:
http://blog.stevenlevithan.com/archives/date-time-format

Kendo Grid Date Column Does not show real date

My kendo grid is showing date like this /Date(691869600000)/ . How do i solve this?
Using this answer I got the Steve code to work for my case. Try this template:
"#= kendo.toString(new Date(parseInt(myField.substr(6))),'MM/dd/yyyy HH:mm tt')#"
'#= kendo.toString(yourDateField,"MM/dd/yyyy HH:MM tt")#'
and make your field type as date.
You need to specify the date as a type in your datasource definition - else it will just be a string:
For example if your field is birthday:
var kendoDS = new kendo.data.DataSource({
schema: {
model: {
fields: {
birthday: { type: "date"}
}
}
});
And when you define the Grid:
kendoGrid({
selectable: whatever values..etc
columns: your-response,
dataSource: kendoDS
});
See this for more info: http://www.kendoui.com/forums/framework/data-source/json-date-handling-changed-in-latest-release.aspx
Use template like the following or like the one in the documentation link.
#= kendo.format("{0:d}",theDateTimeFieldName)#
var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
#= kendo.toString(new Date( parseInt(JSONDateTime.substr(6)) + offsetMiliseconds),"dd-MMM-yyyy hh:mm tt") #

Resources