Next and Previous Buttons disabled when using jQuery UI 1.12

[wallenium]

Hi Folks,
I have a small tester here: http://kompsoft.de/test/eqdkp/ajax/calendarmonthcheck/demos/basic-views.html

if you click on the month Name in the Header, the monthpicker Shows up. All working. Only Thing currently not working is the previous and next button. These Buttons are disabled.

Any idea? Maybe fullcalendar intereferes with the Dates?

[KidSysco]

Hello Wallenium,

I was able to put together a fiddle that shows everything working very nicely together. I was unable to spot the problem in your code, it should work fine. But I am unable to debug your code on your site, this is why we usually try to work in JS FIddle, so we can collaborate on code together.

Take a look at the fiddle I have put together here and see if you can adjust your code accordingly. Hard to tell, but to me, it looks like you are doing everything correctly. Your code works very well in JS Fiddle.

https://jsfiddle.net/kidsysco/a6kq6v5q/

Let me know how this goes.

Thanks

-kid

[KidSysco]

Nice job BTW. That is a very interesting UI and I don't think anyone here has EVER thought of using the month picker like you are doing here. This is very clever and creative thinking you are doing here. Good job!

@benjamin-albert @bsienn - You guys should take a look at what Wallenium is doing with the plugin when you get a chance. I always find it very rewarding when someone uses technology in interesting ways.

[KidSysco]

Yes, I totally agree with you. I see no reason as to why the ui-state-disabled class was being added.

Most importantly, have FUN while coding this weekend @bsienn!

[benjamin-albert]

@wallenium Thank you for opening an issue and helping us make this project better for everyone!

This is happening because (as I've mentioned in #38) my jQuery UI button hacks do not work with the revamped CSS of jQuery UI 1.12 or greater.

When I opened #38 jQuery UI 1.12 was still in Bate and I decided to wait until a user runs into this as an issue before writing support for jQuery 3 and jQuery UI 1.12.

You can easily solve this issue by downgrading to the latest version of jQuery 2 and jQuery UI 1.11.
@wallenium If you cannot downgrade to jQuery UI 1.11 please let us know.

I will also open an issue discussing my ideas for supporting the new jQuery/jQuery UI versions.

As I've mentioned in #71 I am currently really busy furnishing my new apartment on my free time.

Hopefully I can get around to this and other issues that need to be done around here soon.

@KidSysco You can also reach me on Slack and I will try to respond.

[benjamin-albert]

I guess we can also mention this in the installation section of the Wiki.

[wallenium]

First: thanks a lot fit your help. Pretty impressive

@benjamin-albert sadly downgrade is not an Option for us.. if there is a workaround, would be Great if You Could share it :) not sure why not supporting the latest ui Version.

Kind regards
Simon

[benjamin-albert]

@wallenium I am planning to implement support for jQuery UI 1.12 as soon as I finish setting up my apartment.

This should happen sometime at the beginning of April (next month).

In the meanwhile you have a few of options:

1. Implement support for jQuery UI 1.12 and open a Pull Request (best approach).
2. Use DOM and plugin events to hack support (this most likely will break when I implement support for jQuery UI 1.12 and you will want to use the latest version).
3. Try to use version 2.x which does not have the transparent/animated button hacks (this also might not work).
4. Try to run two versions of jQuery UI (which I don't think will work because the CSS will clash).

[wallenium]

i Chose Option 1. Might not be the best implementation, but works for me. Feel free to improve it further.

by the way: http://kompsoft.de/test/eqdkp/ajax/calendarmonthcheck/demos/basic-views.html

Is now a bit better styled than before ;)

[Iznogood1]

Hi All,
not sure to be on topic (it's my fisrt time in github)

To fix the issue with jqueryUI 1.12, I have just commented the lines starting with _setDisabled(this.prev_Button and _setDisabled(this.next_Button

And I also made some updates of the MonthPicker.css file to fix display issues:

.month-picker table {
  /*border-collapse: separate;
  border-spacing: 2px 2px;*/
  border-collapse: collapse;
  border-spacing: 0;
}

.month-picker .ui-button-text {
  /*padding: .4em 0;*/
  padding: 0;
}

.month-picker-header {
   /*margin: 3px 3px 0px 3px;*/
  margin: 0;
}

.month-picker-year-table .ui-button{
	background-color : transparent;
}

.month-picker-year-table a {
    /*border: 1px solid transparent;*/
}

.month-picker-year-table .ui-button {
    font-size: 1.1em;
    margin: 0;
    /*width: 1.5em;
    height: 1.5em;
    cursor: default;*/
    margin: 0;
    border: none;
}


.month-picker td.month-picker-previous{
	padding-left: .25em;
}
.month-picker td.month-picker-next{
	padding-right: .25em;
}


.month-picker-year-table .month-picker-title .ui-button {
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.2em;
	border : none;
}


.month-picker-month-table td {
    /*height: 35px;*/
    text-align: center;
}

.month-picker-month-table .ui-button {
    /*width: 4.2em;
    margin: .2em;*/
    width:3em;
    margin:.25em;
}

[benjamin-albert]

@Iznogood1 Welcome to GitHub!

Whenever you want to propose changes on GitHub you:

1. Check and read this issues. If you read this issue you'll notice there is an open pull request which means someone is already working on resolving the issue with _setVisiblity().

2. If you can't find an open pull request (or you think you have a better solution) for the issue Fork the repo, make the fix and open a pull request.

3. Once you've opened a pull request you will get automated test results (see this example of test results) and we can review and discuss your changes.

4. Once we approve your changes we can merge those changes into the main repo for everybody to use.