In my Razor page, I have this property that is a list containing some dates:
public List<Dates> MyDates { get; set; }
The problem is how to take the date values and send them to the js (since the calendar is build in the js file I can't add an id in the html to use it).
This is how I take them from my Razor Page in the html:
@foreach(var date in Model.MyDates)
{
@date.Date;
}
Create a CSS rule base on the List<Date> Model.MyDates. In your cshtml file you can do things like:
<style>
@Html.Raw(string.Join(", ", Model.MyDates.Select(x => string.Format("[data-date='{0}']", x.ToString("yyyyMMdd")))))
{
/* your CSS styles */
}
</style>
Use Html.Raw() to render a non-escaped html and use , as the separator.
The resultant CSS style rule will be something like:
<style>
[data-date='20200821'], [data-date='20200822'], [data-date='20200823']
{
color: red
}
</style>
After that, render your calendar using js. For the cell of each day, you render a data-date attribute:
<td data-date='20200823'>23</td>
In this way, if the data in data-data matched with your CSS class generated, it will be styled.
In my opinion, using data attribute selector to style the calendar is simple (e.g. does not requires parsing the object into json and decode it in js side) and it may also fits your future needs.
For example, if you want to style all the dates in Aug, 2020, you can create another CSS rule like:
[data-date=^='202008']
{
/* your styles */
}
In this way you don't need to change your js code (i.e. your logic). See the snippet below for more details.
var y = "2020"
var m = "08"
var i = "24"
document.getElementById("calendar").innerHTML = "<div data-date='" + y + m + i + "'>" + i + "</div>"
// example of same month
document.getElementById("calendar").innerHTML += "<div data-date='20200825'>(202008)25</div>"
// example of same day
document.getElementById("calendar").innerHTML += "<div data-date='20200724'>(202007)24</div>"#calendar,
div {
font-size: 2rem;
display: inline-block;
margin: 5px;
}
[data-date='20200824'] {
color: red;
}
/* all day 24 */
[data-date$='24'] {
border: 4px solid blue;
}
/* all 2020 Aug */
[data-date^='202008'] {
background: orange;
}<div id="calendar"></div>P.S. I did not check if all the code above can be run by copy-n-paste but if you get the idea illustrated then you should know how to implement that.
<td data-date='year+month+i'>i</td>And this syntax is obviously not working. How could that be done?
year, month and i are string, then your js code should be something like: "<td data-date='"+ y + m + i +"'>" + i + "</td>". See this example on Jsfiddle: jsfiddle.net/qdur6xog@Html.Raw() to make sure that a non-escaped html string will be rendered.I think you can use a ViewDate like below:
Model:
public class Dates
{
public string Date { get; set; }
}
Handler:
public class IndexModel : PageModel
{
public List<Dates> MyDates { get; set; }
public void OnGet()
{
MyDates = new List<Dates>
{
new Dates{ Date = DateTime.Now.ToShortDateString()},
new Dates{ Date = DateTime.Now.ToShortDateString()},
new Dates{ Date = DateTime.Now.ToShortDateString()}
};
ViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(MyDates);
}
}
View:
@section scripts{
<script>
$(document).ready(function () {
var x = [];
var dates = @Html.Raw(ViewData["Date"]);
dates.forEach(element => x.push(element.Date));
console.log(x);
})
</script>
}
Result:
@{ ViewData["Title"] = "Home Page";} I am not sure what is the syntax to include the dateViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(Model.MyDates);
Model.MyDatesinto aJSON stringthen in the script you can do something like this:var dateString = @Model.MyDates; var dateObj = JSON.parse(dateString); See this for converting toJSON stringstackoverflow.com/questions/6201529/…