customize calendar control in ajax toolkit

mikha
mikha used Ask the Experts™
on
I have calendar control from  ASP.NET AJAX Control Toolkit .
I am trying to customize the background color , and other css properties of the calendar.

Is there any other library or widget , I can use instead of the one from AJAX control toolkit, which is easy to integrate with asp.net and also easy to customize.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Which version of bootstrap are you using
Bootstrap 4 the modal guide is here http://getbootstrap.com/docs/4.1/components/modal/

For Bootstrap 3 the modal guide is here https://getbootstrap.com/docs/3.3/javascript/#modals

In both cases you can setup a Modal with HTML (you must include the Bootstrap JS file) - and link the opening of that modal to buttons using classes and data attributes.

In Bootstap 3 - this example shows you how to do this https://getbootstrap.com/docs/3.3/javascript/#live-demo

In Bootstrap 4 this example shows you how to do this http://getbootstrap.com/docs/4.1/components/modal/#live-demo

Footnote:
You can't call html elements from server side code. Server code runs, renders out HTML (which is sent to the browser) and then that process dies - long before the page is rendered by the browser.

To interact with the page you use JavaScript (which can communicate with the server through AJAX).

You can "hack" a solution that "appears" to call something in the page by outputting JavaScript as part of the page that runs on document load and does whatever action you require.

Author

Commented:
@ Julian Hansen - thanks .

I think you posted answer to my other question here.

I looked at the links you have provided. but I wanted to know how to do set it up using asp.net.

say, I have a asp.net site ( not MVC).

I have created a couple of pages to list items from a database. from any of these aspx pages, the list of the items has a hyperlink on each row,  which when clicked, I want to show the bootstrap Modal and present the details of that item on the list.

since, this modal needs to accessible or from any page when user clicks on the details link , I need to open another page
let's call that AdditionalInfo.aspx page. right now, I can do a window.open and open this page in the new window, but i want to make it
a Modal. I pass in an id to this AdditionaInfo.aspx page and based on that ID , i display details of that record.

Now if i want to open this page into a Modal,
where should the mark/upcode for Modal go, do I create a new aspx page which  will have the markup for the Modal?
where would the Jquery code  go like show in the links, to pass the url of this page and open it in the modal?
can i use the same modal and jquery code, to open other pages in this modal?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You have two options
1. Create the modal on the page as a template. Populate the modal with data when you click the link
2. When you click the link - request the modal markup by AJAX

window.open - opens a new browser window - this is not the same as a modal which is just a styled div in the same document as the event that triggered it.
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Author

Commented:
@Julian - thanks again for your comment. I have done a search to find something similar examples, but I still don't have a full understanding.

If you could provide some code sample, even just to get me started that would really help me to learn more.

1. In my asp.net website. I created a Modal on the page, as a template. As I have mentioned earlier, I already have the details.aspx page, which I want to open in a Modal. so now, do I copy the markup of  details.aspx page into the modal content?

2. I have another additionalInfo.aspx page that I want to open in a Modal page. so my understanding is I create another Modal template for this.

3.  right now, I have already making an ajax call to a function when save button is clicked. this is for keeping log. so now i need to make that call first and then open the aspx page in the Modal. how do i do that , right now my ajax call is below.
$.ajax ({
              type: post,
               data : data,
               url : "log.ashx',
               success : function (data)
               {
                             //on success , i need to open the content of details page in the bootstrap Modal
                }


});

Author

Commented:
@Julian - one more question, regarding the Modal.

as Modal is just a div in the same aspx page, all the submit or cancel button in the Modal should also be handled or the code should be in the cs page of the aspx page that generates the Model right?

so for example,

Main page - index .aspx,
i create a template here for the my Modal. modal as submit/save button.
code to handle this button event should be in index.aspx.cs page .
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
It depends by what you mean by handle.

The code that handles the modal events lives in the HTML page as JavaScript code - this may then result in an AJAX callback to your server that then handles the event server side and sends back a response.

I don't think a postback is a good idea for modals - so you should be looking at an AJAX callback - in which case where your server side code lives (that handles the request) is really up to you - it could be in a controller - or a service for example - it depends entirely on your implementation.

Author

Commented:
@thanks Julian. I will close this question .

I do have further question on how to best implement it in an app website. I will open up a new question for that.

Thank you for your insights.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial