The Ajax:Calendar has a small content display, making it difficult for me to view all the days at once

I am currently utilizing Ajax Calendar v3.0.20820.6783 in my Asp.net-3.5 project and it is functioning properly. However, I am facing a CSS problem that I have been unable to resolve.

The calendar appears small and some days like Saturday and Sunday are missing as shown below. The default styling does not include any CSS, so modifying the width-height properties in CSS did not solve the issue; it only changed the white background size.

https://i.sstatic.net/ps7gU.png

Additionally, when I click on the month, it displays as depicted in the image below:

https://i.sstatic.net/URiAc.png

Any suggestions on how to address this? Thank you for your help.

Below is the code used to generate the calendar:

<table>
      <tr>
         <td>
           <asp:Label ID="labelallowto" runat="server" Text="AllowedTo:"> </asp:Label> 
         </td>
         <td>
            <div>  
               <asp:TextBox ID="txtAllowedTo" runat="server" autocomplete="off"></asp:TextBox>  
               <cc1:CalendarExtender ID="Calendar1" BehaviorID="behaviorIDAllowFrom" FirstDayOfWeek="Monday" PopupButtonID="imgPopup" runat="server" TargetControlID="txtAllowedFrom" Format="dd/MM/yyyy"> </cc1:CalendarExtender>  
            </div>  
         </td>
</tr></table>

Thank you.

EDIT: When I adjust the width, it results in the following appearance:

https://i.sstatic.net/4Fibc.png

Only the background expands without resizing the actual calendar content.

Answer №1

To fix the issue, I included the following CssClass:

In my ASPX file:

<cc1:CalendarExtender ID="Calendar1" CssClass="cal_Theme" BehaviorID="behaviorIDAllowFrom" FirstDayOfWeek="Monday" PopupButtonID="imgPopup" runat="server" TargetControlID="txtAllowedFrom" Format="dd/MM/yyyy"> </cc1:CalendarExtender>

And in my CSS file:

 .cal_Theme .ajax__calendar_container th {
 padding: 0px;}
 .cal_Theme .ajax__calendar_container td {
 padding: 0px;}
 .cal_Theme .ajax__calendar_month {
  padding-bottom: 3px;
  margin-top: -3.5px}

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

Improving efficiency of basic image carousel in Angular 8

In my Angular 8 app, I am developing a basic carousel without relying on external libraries like jQuery or NgB. Instead, I opted to use pure JS for the task. However, the code seems quite cumbersome and I believe there must be a more efficient way to achie ...

Want to learn how to display a description below a photo when you hover over it in a photo gallery?

I am currently creating a basic photo gallery where hovering over a thumbnail displays an enlarged photo below it. My goal is to also have text displayed inside a white text box when hovering over each thumbnail, with unique descriptions for each. I need ...

PHP code repeatedly running causing excessive strain on server CPU

My AJAX call is set to run every 1000 milliseconds, and the PHP script simply stores a number in a session variable. Recently, my hosting provider (HostGator) informed me that I was using over 75% of the CPU on shared hosting due to this AJAX call. Here is ...

Customizing event colors in Full Calendar

My interactive calendar is created using : $('#calendar').fullCalendar({ height: 300, //............. events: jsonData, month: firstMonth }) I am looking to dynamically change the color of an event based on certain conditions ...

Perform a task while an ajax request is being processed

I currently have an HTML page that contains PHP code (Apache web server) for business logic. When I click on the "generate pdf" button, a PDF file is created with the help of an AJAX call. The issue I am facing is that the generated PDF file is quite lar ...

Drawing on Canvas with Html5, shifting canvas results in significant issues

I've been working on developing an HTML5 drawing app, and while I have all the functionality sorted out, I'm facing challenges during the design phase. My main issue is centered around trying to make everything look visually appealing. Specifical ...

Using jQuery to retrieve AJAX data and confirm submission

My objective is to trigger an AJAX call when a form is submitted, retrieve some GET result, and then prompt for confirmation: $('#form1').submit(function() { var messages = ... // get result from $.get() call return confirm("Confirm dele ...

Issue with Bootstrap's form-inline element causing incorrect spacing in btn-group

I'm having an issue with Bootstrap components. When I try to input numbers, everything works fine as long as I don't use form-inline or a navbar. Check out my fiddle here: http://fiddle.jshell.net/6Lrhcezb/ https://i.sstatic.net/hzmlM.png The ...

How to Embed HTML Code in Email Using ASP.NET C#

I have encountered a puzzling issue... I created a form for sending emails, and it worked perfectly. However, when I extended a text box with an AJAX Control Toolkit HTML extension, the code I send in the email does not display properly. Let me give you an ...

An unexplained line break is being added to content loaded via ajax requests

When using either .ajax or .load to load content from an .html page and insert it into an element, I am experiencing a strange issue where a mysterious new line is appended after the content. It is not a break element, but more like a \n or \r ch ...

The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Implementing jqgrid with Symfony to display a datagrid has been a challenging task for me. Thanks to Oleg's insightful response, many of the major issues have been resolved. Below is a snippet of my code: <link rel="stylesheet" type="text/css" ...

The issue with Angular 2's Parameterised router link component not fully refreshing

I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this: <ul id="demo23" class="collapse"> <li> <a [routerLink]="['image-gallery','Picasso ...

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

My responsive CSS grid gallery is experiencing issues with vertical images disrupting the layout, as they appear at full size instead of remaining square like the others. How can I fix this problem? Thank you! Below is the code snippet: <div id=" ...

Constant navigation bar placement

On my website, I have a fixed navigation bar at the top that I want to be transparent. However, when I apply transparency to the navigation bar, the content inside it also becomes transparent. To fix this issue, I added a relative position to the content w ...

Attach functions to elements added dynamically

I've been struggling with trying to attach functions to newly added elements using jQuery. Despite experimenting with various online examples, I haven't been able to get anything to work properly. My setup involves a form with an ID and a button. ...

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

Issue with Inline forms in Ruby on Rails/HTML: The 'checked' attribute with the value of 'false' is

Desired Setting: I am trying to set the default option for this form to be "No" (or false), however, when I set it as such, my application loads with no option selected. When I use :check => true, the default option selected becomes "Yes" (or true). I ...

Utilizing HTML5 geolocation to assign latitude and longitude values to a PHP variable when clicked

Can we retrieve the latitude and longitude of a user by using HTML5 geolocation when they click a button, then pass these values to PHP variables on a new page? For example, if a user is on index.php, where the HTML5 geolocation code is located, and they ...

Determining the output of a retrieved string using Ajax with JQuery

I am currently working on a web service that adds an item to the database when called using JQuery Ajax. The issue I am facing is that the web service returns a string, but I am unable to extract only the string part from the returned data. Instead, I am g ...

Adjusting the labels in Datatable.net for optimal viewing size

I have integrated data table.net into my website and encountered an issue with the labels in the status column. The labels for 'in progress', 'assigned', and 'not assigned' are not wrapping properly. I have tried using text-w ...