Create a mobile-friendly version of the clndr.js calendar

I am currently using a calendar created with the CLNDR plugin, which is quite impressive as it leverages underscore.js and moment.js. While the calendar functions perfectly, I am facing an issue in making it responsive for screens of varying sizes. Despite my attempts, only the day headers are responsive while the actual days display inaccurate information.

For reference, you can view the fiddle here.

Below is the snippet of code that I tried to make responsive, leading to the above-described error:

#mini-clndr .clndr .days-container .days .headers .day-header {
   width: 14%;
   display: inline-block;
   text-align: center;
   color: white;
}

Your assistance in resolving this matter would be greatly appreciated.

javascriptunderscore.jsclndr.js

Answer №1

If you're looking to create a flexible calendar, I recommend using Bootstrap. You can find more information and resources at this link: https://getbootstrap.com/docs/3.3/css/

Here is another example of a well-designed calendar that you can reference: https://www.w3schools.com/howto/howto_css_calendar.asp

(Make sure to view it in fullpage mode to see how it adjusts when the screen size changes) 

/**
 * Author: w3schools.com
 * URL: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_calendar
 */ 
/**
 * Author: w3schools.com
 * URL: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_calendar
 */ 

 * {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

~~~ CSS code snippet truncated for brevity ~~~

</html>

To build your own calendar, consider utilizing Bootstrap alongside CSS styling. Additionally, don't forget to implement media queries for different screen sizes:

@media (max-width: 768px) { ... }
@media (min-width: 768px)) and (max-width: 992px) { ... }

For optimal responsiveness, tailor your CSS styles based on various device sizes like tablets, desktops, and large desktops.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble executing a MongoDB query through Mongoose without using a REST API

Dealing with the Express router has been an uphill battle for me. While Mongoose models work seamlessly within routes, I've hit a roadblock when trying to utilize the models in other files without routes. Whenever I attempt to run the file containing ...

javascriptnode.jsmongodbmongoose

What purpose does the "dom" serve in the "lib" array found in the tsconfig.json configuration file of an

Within my Angular 6 project, I encountered the following segment in tsconfig.json and ts.config.spec.json: "lib": [ "es2016", "dom" ] I am curious about the role of dom. The official documentation explains: "... you can exclude declarati ...

javascriptangulartypescriptconfig

When making a POST request from the client-side JavaScript, the req.body is coming back as an empty

I have been encountering several questions related to the same topic, but unfortunately, none of them have resolved my issue. Hence, I am posting a new question here. My objective is to send a POST request from client-side javascript to the Backend using ...

javascriptnode.jsrestexpresspost

The presence of parentheses in a JQuery selector

My database contains divs with ids that sometimes have parentheses in them. This is causing issues with my JQuery selector. How can I resolve this problem? Let me provide an example to illustrate: https://jsfiddle.net/2uL7s3ts/1/ var element = 'hel ...

javascriptjqueryhtml

Angular 6 is showcasing dates in a quirky manner

In my Angular app, users can enter comments. The comments are displayed automatically with the date they were added. However, there is an odd behavior that I've noticed: When a user enters a comment, the time displayed is incorrect. (Check the ...

javascriptangularhtmltypescripttimeago

Is there a way to incorporate the req.setHeaders method with the res.redirect method in the same app.get function?

var express = require('express'); var app = express(); var PORT = process.env.PORT; app.get('/', function(req, res){ res.json('To search for images, enter your query parameters like this: https://api.cognitive.microsoft.com/bi ...

javascriptnode.jsexpress

Accept a JSON-sending POST request in a JSP file via JavaScript

I have developed an HTML page with an input field. Using javascript, I extract the input value, convert it into JSON format, and attempt to send it through ajax. Additionally, I have a JSP application where a Java method processes this JSON data to store i ...

javascriptjavajsonajaxjsp

Is it possible to line up Ajax request in Javascript?

I am seeking a way to schedule an Ajax request to occur every second. The code I currently have in place functions flawlessly. window.onload = function () { setTimeout(doStuff, 1000); // Wait before continuing } function doStuff() { ...

javascriptajax

How to access an HTTP website from an iframe hosted in an HTTPS parent window

I'm currently troubleshooting an SSL issue that is being caused by insecure content loaded within an iframe. Both of my domain addresses are hosted on the same server, but only one has SSL. When I access the first site with SSL and then navigate to th ...

javascripthtml.htaccessiframessl

Adding semi-colon in JavaScript with special comments by YUI Compressor

Our team recently implemented YUI Compressor (2.4.8) on our project and it's been performing well. However, we encountered an unexpected issue while minifying JavaScript files that contain special comments. It appears that YUI Compressor is automatic ...

javascriptcompressioncommentsminifyyui-compressor

Error: Unable to use 'UserContext' until it has been initialized - React

I am attempting to establish a UserContext that can be accessed by all class components within the React application. However, I am encountering the following error message. ReferenceError: Cannot access 'UserContext' before initialization App.j ...

javascriptreactjscomponentsreact-propsreact-context

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

javascriptcss

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs

Branch IO Integration with React Web Application: Resolving the 'Branch' Undefined Issue

I've been attempting to incorporate branch.io into my React app, but I keep encountering errors when trying to use it. Specifically, I'm getting the following error messages: - TypeError: Cannot read property 'init' of undefined - &apos ...

javascriptreactjsbranch.io

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

Tips for including various checkbox values in the URL

My form includes multiple checkboxes and I'm looking to insert the values of these checkboxes into the URL in the following manner var a=encodeURIComponent(document.getElementById("idofcheckbox").value) xmlhttp.open("GET","InsertPHPData.php?q="+a+,tr ...

phpjavascriptajax

Implementing pagination in Webgrid using AJAX post method

I've developed this JavaScript code: function PartialViewLoad() { $.ajaxSetup({ cache: false }); $.ajax({ url: "/ControllerAlpha/MethodBeta", type: "GET", dataType: "html", data: { s ...

javascriptc#jqueryajaxasp.net-mvc

What is the Reason for Wrapping Masterpage Javascript File References in a PlaceHolder Control?

While examining the demo project for xVal, a validation framework designed for ASP.NET MVC, I observed that the Masterpage javascript references were enclosed in a PlaceHolder control: <asp:PlaceHolder runat="server"> <script type="text/javas ...

javascriptasp.net-mvcreference

What is the most effective method for building this item?

Looking to create an object, let's call it "car": function car(name, speed, options){ this.name = name; this.speed = speed; this.options = options; } When it comes to the "options", I thought of using an array: var carMustang = new car("Musta ...

javascriptarraysobjectconstructor

extracting information from an external document

I'm quite new to both three.js and JavaScript, so please bear with me if this is a simple question. I have a JSON file with a list of objects containing data like this: [ { "x":x,"y":y,"z":z ,"r":r}, { "x":x2,"y":y2,"z":z2 ,"r":r2}, { "x":x3,"y":y3, ...

javascriptthree.js