Trying to use css rules in dataviewjs querry with obsidian tasks calendar

Help
,
1

What I’m trying to do

I set up obsidian tasks calendar github and if you scroll down you will see that the calendar is full screen. I wanted to the same and I was able using a css snippet. The issue is that it affects the entire page but I saw we could use css inside the dataview querry so I tried but it won’t work. I know my css work, I just need to make it work inside the querry. This is what I tried

await dv.view("tasksCalendar", {pages: "", view: "month", firstDayOfWeek: "1", options: "style1",css: ".task-management .markdown-preview-section {width: 100% !important}"})

I don’t understand why it won’t work. Thanks

2

I also tried to use
dv.container.classList.add("task-management")
task-management being my css snippet file name

3

There are two ways (at least) to achieve what you want. One is to tag the element produce by your dataviewjs script (but don’t this can be done in inline stuff), and secondly to expand the dv.view() script with corresponding CSS.

The first variant is for full dataviewjs scripts, and it’ll look something like this:

```dataviewjs
dv.container.className += " vault-header-block"

... the rest of your stuff ...

// Or if you produce the elements, you can do the following
dv.el("div", dv.fileLink("Page-1"), { cls: "vault-header-item" })
```

In the documentation for dv.view() it says that the argument of dv.view("js/myThingy") would either refer to js/myThingy.js or a folder named js/myThingy containing either or both of view.js and view.css.

The former doesn’t allow for custom CSS tagging unless you code it yourself within your script, but the latter allows you to attach CSS to your view automatically.

1 Like