I have this code about custom search with daterange picker.
But when i cek this code with alert, part of $.fn.dataTable.ext.search.push not execute
$('.input-daterange-datepicker').on('apply.daterangepicker', function(ev, picker) {
var start = picker.startDate;
var end = picker.endDate;
alert(start); //Can display
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
alert('hahahahahaah'); //Can't display
console.log(settings.nTable.id);
if ( settings.nTable.id !== 'donatur' ) {
return true;
}
var min = start;
var max = end;
var startDate = new Date(data[0]);
alert(startDate);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
return false;
}
);
donatur.draw();
$.fn.dataTable.ext.search.pop();
});
var donatur = $("#donatur").DataTable({
"ajaxSource": base_url+"admin/getDonaturFundraiser/"+parameter,
"columns": [
{ "data": "tanggal_ambil" },
{ "data": "id" },
{ "data": "nama" },
{ "data": "jenis" },
{ "data": "donasi" },
{ "data": "tanggal" },
{ data: null, render: function ( data, type, row ) {
return '<button type="button" data-id="'+data.id+'" data-nama="'+data.nama+'" data-jenis="'+data.jenis+'" data-donasi="'+data.donasi+'" class="btn btn-primary" data-toggle="modal" data-target="#modalDonatur"><i class="fa fa-pencil"></i></button> | <button class="btn btn-danger sa-warning" id="'+data.id+'"><i class="fa fa-trash"></i></button>'
} }
]
});
My code reference Filter datatable with date range
Have you included the external dependencies? See for example this link: https://jsfiddle.net/ankepv5v/79/
HTML code:
<body>
<div id="reportrange" class="btn btn-success btn-lg">
<span></span> <b class="caret"></b>
</div>
<hr>
<br>
<table id="example" class="table table-striped" cellspacing="0" width="100%"></table>
</body>
Javascript code:
$(document).ready(function() {
$(function() {
var start = moment("2017-01-01 12:34:16");
var end = moment("2018-03-03 10:08:07");
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
var start = picker.startDate;
var end = picker.endDate;
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = start;
var max = end;
var startDate = new Date(data[1]);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
return false;
}
);
table.draw();
$.fn.dataTable.ext.search.pop();
});
var dataSet = [
['2093',
'Feb 23, 2018',
'asd asd ',
'asd#hotmail.com',
'£ 50',
'£0.00',
"Feb 23, 2019",
],
['2092',
'Feb 23, 2018',
'asddd asddd',
'dddd#hotmail.com',
'£ 50',
'£0.00',
"Feb 23, 2019",
],
['2050',
'Feb 20, 2018',
'Angus Fret',
'angus#fgf.co.uk',
'£ 50',
'£0.00',
"Feb 20, 2019",
],
['2048',
'Feb 19, 2018',
'John Smith',
'john#smith.com',
'£ 50',
'£0.00',
"Feb 19, 2019",
],
['2046',
'Feb 19, 2018',
'Ana Ana',
'ana#talktalk.net',
'£ 50',
'£0.00',
"Feb 19, 2019",
],
['2045',
'Feb 19, 2018',
'Ray N',
'rayn#nn.com',
'£ 50',
'£0.00',
"Feb 19, 2019",
],
['2044',
'Feb 16, 2018',
'Paul N',
'paul#gmail.com',
'£ 200',
'£0.00',
"Feb 16, 2019",
],
['2042',
'Feb 13, 2018',
'Bradley New',
'new-marden#hotmail.com',
'£ 100',
'£0.00',
"Feb 13, 2019",
],
['2012',
'Jan 27, 2018',
'Mark Zuckenberg',
'markzeg#me.com',
'£ 150',
'£0.00',
"Jan 27, 2019",
],
];
var table = $('#example').DataTable({
"order": [
[0, "desc"]
],
lengthChange: false,
data: dataSet,
columns: [{
title: "ORDER ID"
},
{
title: "ORDER DATE"
},
{
title: "PURCHASED BY"
},
{
title: "RECIPIENT"
},
{
title: "ORDER TOTAL"
},
{
title: "VAT"
},
{
title: "EXPIRY"
}
]
});
});
On the left side of the JsFiddle page, there is "Resources". Click on Resources to see the external javascript dependencies. You can see them in the below image:
Please test again your solution, right click on the page and select "Inspect". Go to the "console" tab and see if there are Javascript issues. https://developers.google.com/web/tools/chrome-devtools/javascript
SECOND SOLUTION
Try the following code:
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
alert('hahahahahaah'); //Can't display
console.log(settings.nTable.id);
if ( settings.nTable.id !== 'donatur' ) {
return true;
}
var min = start;
var max = end;
var startDate = new Date(data[0]);
alert(startDate);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
return false;
}
);
$('.input-daterange-datepicker').on('apply.daterangepicker', function(ev, picker) {
var start = picker.startDate;
var end = picker.endDate;
alert(start); //Can display
donatur.draw();
$.fn.dataTable.ext.search.pop();
});
Related
Using fullcalendar library, I would like to display the start time for each empty cell on my calendar (empty cells are the one marked with a red cross or red dots in the below screenshot, I modified a bit the aspect of the calendar):
So my expected output is a calendar were timeslots become buttons, when you click you start the process of booking a 30 minutes appointment which would start at the written time (the green slot is an hover effect in the following screenshot):
I can't find any easy way to do it through after reading fullcalendar documentation : https://fullcalendar.io/docs
Subsidiary question, I can't find the way to change the style of the empty cell in the CSS. Can't manage to select the elements through my Chrome console.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
columnHeaderHtml: function(date) {
if (date.getUTCDay() === 0) {
var date_day = "Lundi";
}
if (date.getUTCDay() === 1) {
var date_day = "Mardi";
}
if (date.getUTCDay() === 2) {
var date_day = "Mercredi";
}
if (date.getUTCDay() === 3) {
var date_day = "Jeudi";
}
if (date.getUTCDay() === 4) {
var date_day = "Vendredi";
}
if (date.getUTCDay() === 5) {
var date_day = "Samedi";
}
if (date.getUTCDay() === 6) {
var date_day = "Dimanche";
}
if(date.getMonth() === 0)
{
var date_month = "Jan";
}
if(date.getMonth() === 1)
{
var date_month = "Fev";
}
if(date.getMonth() === 2)
{
var date_month = "Mar";
}
if(date.getMonth() === 3)
{
var date_month = "Avr";
}
if(date.getMonth() === 4)
{
var date_month = "Mai";
}
if(date.getMonth() === 5)
{
var date_month = "Juin";
}
if(date.getMonth() === 6)
{
var date_month = "Juil";
}
if(date.getMonth() === 7)
{
var date_month = "Août";
}
if(date.getMonth() === 8)
{
var date_month = "Sept";
}
if(date.getMonth() === 9)
{
var date_month = "Oct";
}
if(date.getMonth() === 10)
{
var date_month = "Nov";
}
if(date.getMonth() === 11)
{
var date_month = "Dec";
}
var day_num = date.getDate();
return '<b>'+date_day+'</b><br><small>'+day_num+" "+date_month+"</small>";
},
plugins: [ 'interaction', 'dayGrid', 'list', 'googleCalendar','timeGrid' ],
selectable: true,
defaultView: 'timeGridFourDay',
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'short'
},
locale:'fr',
header: {
left: 'prev today',
right: 'next'
},
validRange: {
start: '2019-08-05',
end: '2019-09-05'
},
allDaySlot:false,
firstDay:1,
minTime:"08:00:00",
maxTime:"20:00:00",
displayEventTime: true, // don't show the time column in list view
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'AIzaSyAL9K2UqkCVfV0n81mDW0iEpOJSwcklfsY',
// US Holidays
events: 'fr.fr#holiday#group.v.calendar.google.com',
eventClick: function(arg) {
arg.jsEvent.preventDefault() // don't navigate in main tab
console.log(arg);
},
select: function(info) {
console.log(info)
},
loading: function(bool) {
},
eventSources: [
{
googleCalendarId: 'contact#vetorino.com',
className: "gcalEvent"
}],
displayEventEnd:false,
events:[
{ // this object will be "parsed" into an Event Object
start: '2019-08-05 12:30:00', // a property!
end: '2019-08-05 14:00:00', // a property! ** see important note below about 'e6d' **
overlap: true,
backgroundColor:"#F7F7F7",
textColor:"#979797",
classNames:"closed",
}],
contentHeight: "auto",
});
calendar.render();
});
So far as shown in my previous screenshot I just managed to have empty cells, the only cells where you find some information are cells containing events.
As discussed in the comments above, there is no single element in the fullCalendar HTML which represents a specific "cell" or "slot" in the timeGrid view. The grid you can see on screen is actually an illusion created by layering multiple tables on top of each other.
So to meet your requirement for a user to be able to select a 20-minute appointment in a free slot, I can see two main options. The first is what I would normally recommend, using the standard fullCalendar functionality. The second is more like what you are asking for, but I think it over-complicates things.
1) This option simply sets the calendar with a slot duration of 20 minutes, and then has code to stop the user from selecting a longer period of time (they cannot select a shorter period, due to the slotDuration setting. This means that they can click on any empty space once and it will know to create an event of the correct length in that location. The user is not allowed to select any slot where an event already exists. (P.S. I expect in reality you will need to collect more data before adding events, but for the demonstration it adds an event instantly.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
selectable: true,
select: function(info) {
//console.log(info);
calendar.addEvent({ "title": "Test", start: info.start, end: info.end })
calendar.unselect();
},
selectOverlap: false,
selectAllow: function(selectInfo) {
var stM = moment(selectInfo.start);
var enM = moment(selectInfo.end);
var diff = enM.diff(stM, "minutes");
console.log(diff);
if (diff > 20)
{
return false;
}
return true;
},
events: [
{ "title": "Existing event", "start": "2019-08-08 10:00", "end": "2019-08-08 10:20"},
{ "title": "Existing event", "start": "2019-08-08 13:20", "end": "2019-08-08 13:40"},
]
});
calendar.render();
});
Demo: https://codepen.io/ADyson82/pen/aeqJQg
2) This option is closer to your desired UI (from your 2nd screenshot) but is a bit more complicated to achieve. I also, personally, think it leaves your calendar looking cluttered, and making it harder to see where the free and busy slots are, but ultimately it's up to you how you want to implement it. This works by adding a second event source, containing a list of all currently free slots. These are then used to display the start time of each free slot in the centre of it. They are coloured differently from the existing events (indicating a busy slot), so that it's a bit easier to tell the difference.
Of course, this requires you to use your server-side code to calculate all the currently free slots in your database and use that information to populate the second event source. (In the demo the free slot data is static, but of course that will not work in a real application.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
displayEventTime: false,
eventClick: function(info) {
if (info.event.extendedProps.type == "free") {
calendar.addEvent({
title: "Test",
start: info.event.start,
end: info.event.end
});
info.event.remove(); //delete the "free slot" event
}
},
eventSources: [
{
id: "busy",
events: [
{
title: "Existing event",
start: "2019-08-08 10:00",
end: "2019-08-08 10:20"
},
{
title: "Existing event",
start: "2019-08-08 13:20",
end: "2019-08-08 13:40"
}
]
},
{
id: "free",
backgroundColor: "green",
events: [
{
title: "08:00",
start: "2019-08-08 08:00",
end: "2019-08-08 08:20",
type: "free"
},
{
title: "08:20",
start: "2019-08-08 08:20",
end: "2019-08-08 08:40",
type: "free"
},
{
title: "08:40",
start: "2019-08-08 08:40",
end: "2019-08-08 09:00",
type: "free"
},
{
title: "09:00",
start: "2019-08-08 09:00",
end: "2019-08-08 09:20",
type: "free"
},
{
title: "09:20",
start: "2019-08-08 09:20",
end: "2019-08-08 09:40",
type: "free"
},
{
title: "09:40",
start: "2019-08-08 09:40",
end: "2019-08-08 10:00",
type: "free"
},
{
title: "10:20",
start: "2019-08-08 10:20",
end: "2019-08-08 10:40",
type: "free"
},
{
title: "10:40",
start: "2019-08-08 10:40",
end: "2019-08-08 11:00",
type: "free"
},
]
}
]
});
calendar.render();
});
For this demo I only created handful of the "free" slots (because it was tedious to create them), but hopefully you can get the idea of how it would start to look with dozens of them all over the calendar. Of course again you can amend the CSS to your requirements.
Demo: https://codepen.io/ADyson82/pen/JgpNEX
(You can of course amend the CSS of this further to make it appear more like your desired look and feel.)
Addendum: Here's the OP's final version, for anyone who is interested in the end product - based on taking the above suggestions into consideration: https://codepen.io/hugo-trial/pen/rXdajv
function addtoday(){
alert("Today");
}
function addyesterday(){
alert("Yesterday");
}
function lastweek1(){
alert("lastweek");
}
function last30days1(){
alert("last30days");
}
function presentmonth1(){
alert("this month");
}
function lastmonth1(){
alert("lastmonth");
}
function randomfunction(){
alert("randommmmmm");
}
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
if (picker.chosenLabel == "Today") {
addtoday();
}
if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
if (picker.chosenLabel == "Last 7 Days") {
lastweek1();
}
if (picker.chosenLabel == "Last 30 Days") {
last30days1();
}
if (picker.chosenLabel == "This Month") {
presentmonth1();
}
if (picker.chosenLabel == "Last Month") {
lastmonth1();
}
else if(setDate == "10/02/2018" && setDate == "10/20/2018") {
randomfunction();
}
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
enter image description hereI am able to execute functions while i click on labels .Same way i should be able to execute functions while i click on a random date on my calendar
$(function () {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
minDate: moment().subtract(365, 'days'),
maxDate: moment(),
ranges: {
'Today': [moment(), moment(),],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days'),],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
},
},
cb)
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
if (picker.chosenLabel == "Today") {
addtoday();
}
else if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
else if (picker.chosenLabel == "Last 7 Days") {
lastweek1();
}
else if (picker.chosenLabel == "Last 30 Days") {
last30days1();
}
else if (picker.chosenLabel == "This Month") {
presentmonth1();
}
else if (picker.chosenLabel == "Last Month") {
lastmonth1();
}
else if(picker.startDate == "10/02/2018" && picker.endDate == "10/20/2018"){
randomfunction();
}
});
I am able to execute all functions but I am unable to execute randomfunction in my code,and can i store those dates in variables so that i can change it dynamically
You didn't convert the date your comparing from Epoch format.
EDIT: Also the endDate in your range is set to the end of that day, e.g a time of 23:59. I've amended it so that when you do the comparison it is set to the start of that day (00:00). That may not be what you want but it is simple to amend.
function addtoday(){
alert("Today");
}
function addyesterday(){
alert("Yesterday");
}
function lastweek1(){
alert("lastweek");
}
function last30days1(){
alert("last30days");
}
function presentmonth1(){
alert("this month");
}
function lastmonth1(){
alert("lastmonth");
}
function randomfunction(){
alert("randommmmmm");
}
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
if (picker.chosenLabel == "Today") {
addtoday();
}
if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
if (picker.chosenLabel == "Last 7 Days") {
lastweek1();
}
if (picker.chosenLabel == "Last 30 Days") {
last30days1();
}
if (picker.chosenLabel == "This Month") {
presentmonth1();
}
if (picker.chosenLabel == "Last Month") {
lastmonth1();
}
if(picker.startDate == toEpochDate("10/02/2018") && toEpochDate(picker.endDate) == toEpochDate("10/20/2018")) {
randomfunction();
}
});
function toEpochDate(date){
var d = new Date(date);
d.setHours(0,0,0,0);
return d.getTime();
}
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
I'm using a my-date-range-picker to display a calendar to the user choose a date and display her in a span like a string.
Step by step:
I click in the label to open the calendar;
The calendar opens with current date selected;
I choose a date, for example, 8th October, 2018;
The calendar closes;
The date that i previous choose appears correctly in span;
Open the calendar again;
Here, the calendar shows the current month(September). I want that calendar show the date that i previous select - 8th October, 2018;
My HTML code for date picker:
<my-date-range-picker *ngIf="this.opened && view=='date'" class="date_picker" [options]="date_picker" [(ngModel)]="this.model" (dateSelected)="onDateRangeChanged($event)"></my-date-range-picker>
The label responsable to show the selected date:
<div class="lineheight" [ngClass]="{'dates': type_resume_view == 'none'}">
<span>{{dates.first.format('DD/MM/YYYY')}}</span>
</div>
In my TS file, the event of date change goes to:
onDateRangeChanged(ev) {
if (this.view == "range") {
this.dates.first = moment({
day: ev.beginDate.day,
month: ev.beginDate.month - 1,
year: ev.beginDate.year
});
this.dates.last = moment({
day: ev.endDate.day,
month: ev.endDate.month - 1,
year: ev.endDate.year
});
this.setDate();
if (!this.always_open) {
this.onSelectDate.emit(this.dates);
this.opened = false;
}
}
if (this.view == "date") {
this.dates.first = moment({
day: ev.date.day,
month: ev.date.month - 1,
year: ev.date.year
});
this.dates.last = moment({
day: ev.date.day,
month: ev.date.month - 1,
year: ev.date.year
});
if (!this.always_open) {
this.onSelectDate.emit(this.dates);
this.opened = false;
}
if (this.interval != undefined) {
switch (this.interval) {
case "week":
this.dates.first = this.dates.first.startOf("week").add(1, 'day');
this.dates.last = this.dates.last.endOf("week").add(1, 'day');
break;
case "month":
this.dates.first = this.dates.first.startOf("month");
this.dates.last = this.dates.last.endOf("month");
break;
}
}
this.setDate();
if (this.always_open) {
this.opened = false;
setTimeout(() => {
this.opened = true
}, 0);
}
}
}
And then to method setDate():
this.model.beginDate.year = this.dates.first.format("YYYY");
this.model.beginDate.month = this.dates.first.format("MM");
this.model.beginDate.day = this.dates.first.format("DD");
this.model.endDate.year = this.dates.last.format("YYYY");
this.model.endDate.month = this.dates.last.format("MM");
this.model.endDate.day = this.dates.last.format("DD");
My declared variables are:
date_picker: IMyDrpOptions = {
showClearBtn: false,
showApplyBtn: false,
showSelectDateText: false,
componentDisabled: false,
markCurrentDay: true,
showWeekNumbers: true,
inline: true,
dateFormat: 'yyyy-mm-dd',
firstDayOfWeek: 'mo',
disableUntil: {
year: 1990,
month: 1,
day: 1
}
};
private model: any = {
beginDate: {
year: 2018,
month: 10,
day: 9
},
endDate: {
year: 2018,
month: 10,
day: 19
}
};
Auxiliar Methods:
open_calendar() {
this.model = this.model;
if (!this.always_open) {
this.opened = !this.opened;
if (this.opened) {
this.onCalendarOpen.emit(this.dates);
} else {
this.onClose.emit();
}
}
}
close_calendar() {
this.opened = false;
this.onClose.emit();
}
I just want that calendar open in the previous selected month, because the date is correctly selected.
UPDATE:
The example that i describe, the date is correct but not show the month correctly
my-date-range-picker has the defaultMonth attribute, that's what you will use to set which month the calendar should open such as:
import { IMyDefaultMonth } from 'mydatepicker';
private defaultMonth: IMyDefaultMonth = { defMonth: '12/2019' };
In HTML:
<my-date-range-picker name="mydate" [options]="myDatePickerOptions" [defaultMonth]="defaultMonth" />
in the example the default month will open at December 2019 as defined by defaultMonth.
How Can I append text to c3.js regions? I have three regions in my chart and I would like to append three different texts to them. So far I have tried to use d3.js but with no success
var rectOffset = (( d3.select(this).attr("x") ) * 1) + 25;
d3.selectAll(".c3-region-0 rect")
.append("text")
.text("Some Text")
.attr("dy","15px")
.attr("dx",rectOffset+"px")
I get an error
TypeError: Cannot read property 'getAttribute' of null
at Array.d3_selectionPrototype.attr (d3.js:578)
jsfiddle
code:
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
["x", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03"],
["Democrates", 49.85, 49.89, 49.82, 49.51, 49.42, 49.33, 49.24, 49.64, 49.57, 49.57, 49.01, 48.67, 48.7, 48.7, 48.7, 48.63, 48.63, 48.63, 48.63, 48.63, 48.61, 48.61, 48.68, 48.76, 48.84, 48.73, 48.76, 48.79, 48.81, 49.68, 49.63],
["Republicans", "50.15", "50.11", "50.18", "50.49", "50.58", "50.67", "50.76", "50.36", "50.43", "50.43", "50.99", "51.33", "51.30", "51.30", "51.30", "51.37", "51.37", "51.37", "51.37", "51.37", "51.39", "51.39", "51.32", "51.24", "51.16", "51.27", "51.24", "51.21", "51.19", "50.32", "50.37"]
],
colors: {
Democrates: '#4575b4',
Republicans: '#d73027'
},
},
axis: {
x: {
type: 'timeseries',
max: '2016-11-08',
tick: {
values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-18", "2016-07-28" ],
format: function (x) {
if (x == "Mon Feb 01 2016 00:00:00 GMT+0100 (CET)"){
return 'Feb 01' + 'Primaries and Caucuses '
} else if (x == "Tue Nov 08 2016 00:00:00 GMT+0100 (CET)") {
return 'Nov 08 Election Day'
} else if (x == "Mon Sep 26 2016 00:00:00 GMT+0200 (CEST)") {
return ' Sep 26 Start of Presidential Debates'
} else if (x == "Mon Jul 18 2016 00:00:00 GMT+0200 (CEST)") {
return 'Jul 25 Announcement of Nominees'
} else {
var format= d3.time.format("%b %d");
var date = format(x)
return date
}},
fit: false
}
}
},
grid: {
y: {
lines: [
{value: 50},
]
},
x: {
lines: [
{value: "2016-01-08", text: "Want to rorate this text in 180 degrees",
class: "xLineLable", position: "end"}
]
}
},
regions: [
{axis: 'x', start: "2016-02-01", end: "2016-06-14", class: 'regionX'},
{axis: 'x', start: "2016-07-18", end: "2016-07-28", class: 'regionX'},
{axis: 'x', start: "2016-09-26", end: "2016-10-19", class: 'regionX'}
]
});
You can't add text to a rect, you'll need to add it as a sibling element under the c3-region group element, which is a bit of a pain in d3 (and rectoffset needs to be a function, or the d3.select(this) gets the top-level dom node). In rectOffset I select the text's parentNode, then grab it's rect child node.
There were a couple of other gotchas that stopped the text turning up that I didn't expect.. attr always returns a string so .attr(x)+25 would return "75"+25 -> 7525, needed to cast to a number with '+'... I ended up using text-anchor instead anyways. Plus the fill-opacity needed to be adjusted for the text to be seen even when in the right spot. That had me flummoxed for a while.
var rectOffset = function () { return +d3.select(this.parentNode).select("rect").attr("x"); };
d3.selectAll(".c3-region-0")
.append("text")
.text("Some Text")
.attr("dy","15")
.attr("dx",rectOffset)
.style("fill-opacity", 1)
.attr("text-anchor", "start")
;
http://jsfiddle.net/yrzxj3x2/35/
I have a list of events for a calendar. I'd like to hyperlink the title or location--though preferably the location (see below) to a website. How do I do this?
var events = [
{ date: "2015-10-10", title: 'October 15, 2015', location: 'Event One Deadline' },
{ date: "2015-10-25", title: 'October 25, 2015', 'location: 'Payment Deadline' },
{ date: "2015-12-25", title: 'December 25, 2015', location: 'Christmas: We're closed.' },
{ date: "2015-12-26", title: 'December 26, 2015', location: 'Boxing Day: We're closed.'} ];
If i got it right you want to change the data of location to make it a link, so here you go:
events.map(function( row,index ){
row.location = '' + row.location + '';
});
or the old way
for( var i = 0, length = events.length; i < length; i++ ) {
events[i].location = '' + events[i].location + '';
}
If i got your question, you need to parse JSON data.
Your code is JSON object
you can use jSON.parse(JSON_DATA)
var events = [
{ date: "2015-10-10", title: "October 15, 2015", location: "Event One Deadline" },
{ date: "2015-10-25", title: "October 25, 2015", location: "Payment Deadline" },
{ date: "2015-12-25", title: "December 25, 2015", location: "Christmas: We're closed." },
{ date: "2015-12-26", title: "December 26, 2015", location: "Boxing Day: We're closed."} ];
console.log(events); // Object
for(i=0;i<=events.length;i++){
console.log(events[i].date);
console.log(events[i].location);
console.log(events[i].title);
}
now values can use for make links
Note: your JSON data need to have double-qutos ("") instead of ''
you can now access value like: events[0].title and create link like:
events[0].location