How to change the date?

[OmarGoubail]

I love the plugin, but can you give an example of how to change the file name date format?

[Richardsl]

thanks, you could probably use something like the example below, but havent tested it:

dv.span("**Alcohol**")

const calendarData = { 
    year: 2022,
    colors: {   // optional, defaults to green
      orange:      ["#ffa244","#fd7f00","#dd6f00","#bf6000","#9b4e00"],
      pink:        ["#ff96cb","#ff70b8","#ff3a9d","#ee0077","#c30062"]
    },
    entries: [] // populated in the DataviewJS loop below
}

for(let page of dv.pages('"Journal"').where(p=>p.alcohol).sort(p=>p.file.name)){ 

    const date = new Date(page.file.name);
    const yyyy = date.getFullYear();
    let mm = date.getMonth() + 1; // Months start at 0!
    let dd = date.getDate();
    if (dd < 10) dd = '0' + dd;
    if (mm < 10) mm = '0' + mm;
    const formattedDate = yyyy + "-" + mm + '-' + dd;

    calendarData.entries.push({
        date: formattedDate, 
        intensity: page.alcohol
    })
      
}

renderHeatmapCalendar(this.container, calendarData)

[raysico]

	dv.span("**🏋️ Proudness 🏋️**")  
	const calendarData = {  
	year: 2024,
	colors: {  
	greeny: ["#B3FFD9", "#99FFC2", "#66FFB2", "#33FF99", "#00CC66"]
	},  
	entries: []  
	}  
	//loop begin
	for(let page of dv.pages('"04复盘/04日报"').where(p=>p.Proudness).sort(p=>p.file.name)){  
	//calendarData.entries.push({  
	//date: page.file.name,  
	const date = new Date(page.file.name);
    const yyyy = date.getFullYear();
    let MM = date.getMonth() + 1; // Months start at 0!
    let DD = date.getDate();
    if (DD < 10) dd = '0' + DD;
    if (MM < 10) mm = '0' + MM;
    const formattedDate = yyyy + "-" + MM + '-' + DD;
    calendarData.entries.push({
    date: formattedDate,
	intensity: page.Proudness,  
	content: await dv.span(`[](${page.file.name})`), //for hover preview  
	})  
	}  
	renderHeatmapCalendar(this.container, calendarData) 
	```

why is didn't work？

[wesleyboers]

This formatted date works thank you! The only problem I have is it's not showing the color I want it to show. For example I want to track a habit where I track the amount of pages I read everyday from 1 to let's say 20. how do you intensify a color? Any tips will be helpful :)

[wesleyboers]

never mind I have fixed it :) 👍

[YannikDe]

Ran over the same issue. Could you provide your solution for me?

[YannikDe]

Never mind! I also fixed it :D

[shadowlift]

Hi there, I have a similar issue to @wesleyboers but am struggling to make it work. My daily notes are formatted in the form "dddd, MMMM Do YYYY" ("Wednesday, November 16th 2022").
Here is the code I'm trying to adapt:

dv.span("Physics")
const calendarData = {
    year: 2022,  // (optional) defaults to current year
    colors: {    // (optional) defaults to green
        blue:        ["#8cb9ff", "#69a3ff", "#428bff", "#1872ff", "#0058e2"], // first entry is considered default if supplied
        green:       ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127"],
        red:         ["#ff9e82", "#ff7b55", "#ff4d1a", "#e73400", "#bd2a00"],
        orange:      ["#ffa244", "#fd7f00", "#dd6f00", "#bf6000", "#9b4e00"],
        pink:        ["#ff96cb", "#ff70b8", "#ff3a9d", "#ee0077", "#c30062"],
        orangeToRed: ["#ffdf04", "#ffbe04", "#ff9a03", "#ff6d02", "#ff2c01"]
    },
    showCurrentDayBorder: true, // (optional) defaults to true
    defaultEntryIntensity: 4,   // (optional) defaults to 4
    intensityScaleStart: 10,    // (optional) defaults to lowest value passed to entries.intensity
    intensityScaleEnd: 100,     // (optional) defaults to highest value passed to entries.intensity
    entries: [],                // (required) populated in the DataviewJS loop below
}

//DataviewJS loop
for(let page of dv.pages('"1. Daily notes/2022/11-November/"').where(p=>p.physics).sort(p=>p.file.name)){
    //dv.span("<br>" + page.file.name) // uncomment for troubleshooting

    const date = new Date(page.file.name);
    const yyyy = date.getFullYear();
    let mm = date.getMonth() + 1; // Months start at 0!
    let dd = date.getDate();
    if (dd < 10) dd = '0' + dd;
    if (mm < 10) mm = '0' + mm;
    const formattedDate = yyyy + "-" + mm + '-' + dd;

    calendarData.entries.push({
        date: formattedDate,     // (required) Format YYYY-MM-DD
        intensity: page.physics, // (required) the data you want to track, will map color intensities automatically
        content: "🏋️",           // (optional) Add text to the date cell
        color: "orange",          // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
    })
}

renderHeatmapCalendar(this.container, calendarData)

Is the problem that getMonth(), getDate() etc. aren't working in this case of date format?

[dwassem]

I got mine to work with:

let date = moment(page.file.name, "MMMM Do YYYY");
let formattedDate = date.format('YYYY-MM-DD');

[samhsabin]

Using dwassem's suggestion, just put your date format of "dddd, MMMM Do YYYY" instead of "MMMM Do YYYY"

let date = moment(page.file.name, "dddd, MMMM Do YYYY");
let formattedDate = date.format('YYYY-MM-DD');

[mthlvt]

FYI another solution is to get the date from the file creation date property independently of the file name:

let month = page.file.cday.month <= 10 ? "0"+page.file.cday.month : page.file.cday.month;
let day = page.file.cday.day <= 10 ? "0"+page.file.cday.day : page.file.cday.day;
let date = page.file.cday.year+"-"+month+"-"+day

[javiavid]

Can you write the complete code that you have used?
I don't know dataviewjs well and it doesn't work for me.

Thanks

[mthlvt]

here is a code sample that should work:

let debug = false; // change to true to enable console logging
for (let page of dv.pages('"path1" OR "path2" OR #tag1').where(p => p["an optional string to filter pages further"])) {
	  //dv.span("<br>" + page.file.name) // uncomment for troubleshooting
          let month = page.file.cday.month <= 10 ? "0"+page.file.cday.month : page.file.cday.month;
          let day = page.file.cday.day <= 10 ? "0"+page.file.cday.day : page.file.cday.day;
          let uglydate = page.file.cday.year+"-"+month+"-"+day
          debug && console.log(uglydate)
          debug && console.log({page})
	  calendarData.entries.push({
	      date: uglydate,     // (required) Format YYYY-MM-DD
	      intensity: 50, // (required) the data you want to track, will map color intensities automatically
	      content: dv.span(`[[${page.file.name}|]]`),           // (optional) A
	      //content: await dv.span(`[[${page.file.name}]]`),           // (optional) Add text to the date cell
	      color: "pink",          // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
	  })
renderHeatmapCalendar(this.container, calendarData)

[GoulartNogueira]

I believe you can do something like this, instead of uglydate:

let mydate = new Date(page.file.cday);
let beautifuldate = mydate.toISOString().split('T')[0]

[soyelcharly15]

Damn! my daily note format is "YYYY-MM-DD ddd", (so today is 2024-01-03 Wed) is there a way to change it to make it work?
thanks a lot in advanced!!!

[GoulartNogueira]

A very simple way would be getting the first 10 characters from your string.

[gpdnjs70754]

try this

for(let page of dv.pages('"01_log/Daily/2024"').where(p=>p.Mood).sort(p=>p.file.name)){ 

    let date = moment(page.file.name, "YYYY-MM-DD ddd");  
	let formattedDate = date.format('YYYY-MM-DD');

    calendarData.entries.push({
        date: formattedDate, 
        intensity: page.Mood
    })
      
}

[GoulartNogueira]

For those who use some kind of date in YAML:

//DataviewJS loop
for (let page of dv.pages()
.where(p => p.file.path.contains("MY_FOLDER"))) {
    var filedate = page.date;
    var date = new Date(filedate);
    try{
	    let format = date.toISOString().split('T')[0]
	    calendarData.entries.push({
	        date: format,     // (required) Format YYYY-MM-DD
	    })
    } catch (error) {
	  dv.span("<br/>" + error + " [[" + page.file.name + "]]") // uncomment for troubleshooting
	  console.error(error);
  }
}